Drawing lines
The first thing we want to implement is a way for the user to draw simple lines, or to scribble on the canvas. To do that we need to get the points when the user moves the mouse with the mouse button pressed down and draw lines between them. So let's learn how to draw on the canvas.
Paths and strokes
The most primitive way to draw on the canvas is by defining paths and then stroking, or drawing them. Think of it as planning what you are going to draw in your head, then putting your pen to the paper, and actually drawing it out.
To create a path you define it by specifying two or more points using moveTo()
and
lineTo()
methods. Then you draw it to the canvas by calling the stroke()
method. There are four basic methods that you use to define and draw paths.
beginPath()
: This method starts a new path.moveTo(x, y)
: This method moves the pen to a new position without drawing.lineTo(x, y)
: This method draws a line from the previous position to a new position.stroke()
:This method...