User Interaction and the HTML5 APIs - HTML5 Mastery: Semantics, Standards, and Styling - page 316

vas.offsetLeft;
if (lastY == 0) lastY = e.pageY - can-
vas.offsetTop;
// begin a new line and move to the last saved
x, y coordinates
context.beginPath();
context.moveTo(lastX, lastY);
// set the saved x, y coordinates to the posi-
tion of the mouse cursor
lastX = e.pageX - canvas.offsetLeft;
lastY = e.pageY - canvas.offsetTop;
// draw a line
context.lineTo(lastX, lastY);
context.closePath();
context.stroke();
}
window.onload = init;
Figure 7-12. Doodle made with a simple canvas drawing application
Canvas animation
Animation is just a series of still images, so the basic steps involved in animating are as
follows:
1. Clear any existing graphics on the canvas.