This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Add strokes to circles using HTML Canvas

    Alyssa NicollAlyssa Nicoll

    In this lesson we will look at the dangers of not closing your circles. So we’ll have to learn to build the habit of always closing our paths.

    We also cover giving circles stroke, along with specifying strokes styles such as lineWidth, strokeStyle, and fillStyle.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    00:01 We have circles under our belt, simple ones at least, using the context.arc method. We draw them by giving them a center x and y, radius, and of course the start and end angle. However, we need to know about drawing perhaps multiple circles on one canvas.

    00:27 Can we do it? Yes, we can. I swapped the center x and center y for another arc, refresh, and voila, you have another identical circle diagonal of the other one. However, if you continue down this path you will most certainly crash and burn, and here is why.

    00:51 Right now, we're just using context.fill, but what happens if we actually try to use stroke? Oh, oh beautiful. As you can see it did draw the two circles in the exact positions and with the radius that they needed, however, it also connected them.

    01:11 Even though with fill you couldn't tell that it was actually doing this, it's a good practice to get into audio skip stroke fill, what have you, and then closing the path for each and every circle-arc that you draw. Begin path, boop, boop, boop.

    01:41 This way, each arc gets an opening begin path and a closing close path. You can also of course vary what you do here. We could also say context.stroke, was it style, I think? I think it's style. Totally going out on a limb here. This could go badly. Aha. I didn't fail epically, it is pink.

    02:10 Let's inaudible , shall we? Ooh. We can also adjust the fill color by saying context.fillStyle and set that to perhaps a lovely Rebecca purple. Save it, refresh, and now we have pink and purple. Hmm, lovely.

    02:32 This line, the stroke around our second circle is a little thin, so we can control that by saying context.lineWidth and setting that t something thicker, and you'll see the stroke got bigger.

    Discuss

    Discuss