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 propertiesstyle | 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 MethodscreateLinearGradient() | |
createPattern() | |
createRadialGradient() | |
addColorStop() | |
Resources
WWW Schools - HTML Canvas Reference
MDN - HTMLCanvasElement
Dive Into HTML5 #4 Let's call it a drawing surface