Essentially, every shape you draw is a bunch of points connected with lines, which we call a path. A path has to start somewhere, and can be closed when we’ve created all the necessary parts. For example, a rectangle is a path of four points with straight lines connecting them.
To create a path, use
any path methods
closePath() method therefore connects the first and last point with a straight line, literally closing the path.
The stroke is the actual path, or outline of the path. When you draw a straight line between two points, you can display the line by displaying the stroke of the path.
To stroke the last shape you created, use
The fill is how a path is filled. When you draw a rectangle, you can make it a blue rectangle by changing the fill to be blue.
To fill the last shape you created, use
ctx.beginPath(); ctx.drawRect(10,10,100,100); //At this point, nothing is displayed yet ctx.stroke(); ctx.fill(); //Now the rectangle is filled and outlined with black //Because the rectangle already is a closed shape, closePath() is not needed
As you might have noticed, we still haven’t said anything about the colours or techniques to use for stroking/filling, in which case the canvas defaults to black. Throughout this course you’ll learn ways to do that, but for now I want to focus on those path methods that actually create the shapes you want.