Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Add strokes to circles using HTML Canvas

    htmlHTML 5

    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.



    Become a Member to view code

    You must be a Pro 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
    orLog In




    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.

    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.

    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.

    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.

    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.

    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.

    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.