include a canvas in a webpage:
<canvas id="a_canvas" width="300" height="225">
obtain a reference to the canvas to use with javascript:
var a_canvas = document.getElementById("a_canvas");
var a_context = a_canvas.getContext("2d");
draw a rectangle:
a_context.fillRect(x, y, width, height);
Canvas context properties| style | fillStyle | set or return the color, gradient, or pattern used to fill the drawing |
| style | strokestyle | set or return the color, gradient, or pattern used to draw lines |
| color | shadowColor | set or return the color used for shadows |
| color | shadowBlur | set or return the level used for shadow blurring |
| color | shadowOffsetX | set or return the offset of the shadow from the object |
| color | shadowOffsetY |
Canvas context Methods| createLinearGradient() | |
| createPattern() | |
| createRadialGradient() | |
| addColorStop() | |
Resources
WWW Schools - HTML Canvas Reference
MDN - HTMLCanvasElement
Dive Into HTML5 #4 Let's call it a drawing surface