Drawing in the Canvas World
We'll cover the following...
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:
The only difference is that the content inside our script tag doesn’t contain the code for drawing the blue line to the canvas. We just have the two lines that we need for getting the rendering context, and that detail is important. All of the drawing methods that we talked about earlier work off of the context object, so without this code, nothing in your canvas will actually work.
Picking our Starting Point
With the rendering context in our sights via the context object, we have the digital equivalent of a ...