The Canvas Element
var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d');
The context object returned contains a number of methods to draw on the canvas. The following example draws a 50 by 50 pixel square at the top left corner of the canvas. For an entire list of the available methods, refer to the W3C HTML Canvas 2D Context Specification.
var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); context.fillRect(0, 0, 50, 50);
In our animation we will be drawing mostly lines. To draw a line, don’t think of it as a line, but as a path. A path can be made up of a number of adjoining line segments or curves. First we define the path, then apply a stroke to it. The following example draws a diagonal red line from the point (0, 0) to the point (100, 100).
context.beginPath(); context.moveTo(0, 0); context.lineTo(100, 100); context.lineWidth = 1; context.strokeStyle = 'rgb(255, 0, 0)'; context.stroke();