Drawing in the Canvas World

Our canvas provides you with a bunch of handy methods that make drawing things to it pretty easy. We will cover almost all of them in time, but right now we are going to focus on just the methods needed to help us draw the funny four-sided shape you saw earlier. The methods we are going to look at are the following: beginPath, moveTo, lineTo, closePath, lineWidth, strokeStyle, fillStyle, stroke, fill. I know this list of methods seems really long, but once you see them in use, it will all make sense.

Starting Point

Let’s pick up from where we left off in the previous article by starting with a mostly-empty HTML document that already has a canvas element defined inside it: