Draw in HTML Canvas

Add color to graphics using HTML Canvas

 Specifying Height and Width on the Canvas Element

Draw circles in HTML Canvas using .arc

Add strokes to circles using HTML Canvas

Use HTML Canvas arcTo, moveTo, and lineTo to draw a piece of a pie chart

Add click interaction to HTML Canvas using JavaScript events

Create Graphics with HTML Canvas

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

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

Course

Create Graphics with HTML Canvas

Add strokes to circles using HTML Canvas

Share this video with your friends