Add strokes to circles using HTML Canvas

[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.