Here's the starting point for the draw program. It's a little different to the one we did before, but not too different.
Things to notice:
- We make a canvas and apply a style to give it a khaki background.
- We declare a variable called rect, and keep a copy our the bounding rectangle of the canvas. This lets us translate mouse co-ordinates to canvas co-ordinates.
- When the mouse button goes down, we use moveTo to move the drawing point to where the mouse is, and do a beginPath.
- When the mouse if moved, if the button is down, we use lineTo and stroke to draw a line between where the mouse last was, and where it is now
- We set a couple of canvas properties (lineJoin and lineCap) to make the eventual line smoother and less jagged.
- To keep the example simpler, we're just doing mouse movement, not worrying about touch. You might choose to add touch capability later.
- There's some other details we should worry about, like what happens if you move the mouse outside the canvas and then release the button, but in the interests of a simple example, we'll just keep it minimal.
Give it a try - click and drag inside the canvas.