Simple shapes E-mail
Canvas element
Canvas context
Transformations
Compositing
Colours
Context styles
Gradients
Patterns
Line styles
Shadows
Simple shapes
Paths
Text
Images
Pixel manipulation
Example: Webtris

context.clearRect (x, y, w, h);

  • Clears all pixels on the canvas in the given rectangle to transparent black.

context.fillRect (x, y, w, h);

  • Paints the given rectangle onto the canvas, using the current fill style.

context.strokeRect (x, y, w, h);

  • Paints the box that outlines the given rectangle onto the canvas, using the current stroke style.

Unfortunately, your browser does not support modern web standards.
Please use one of the supported browsers listed below, they're free to download and use.

Supported browsers: Firefox, Safari, Chrome, Opera, and Konqueror.


Source (click to expand)

var cnv = document.getElementById('canvas');
var ctx = cnv.getContext('2d');
ctx.width = ctx.width; // Clear the context

ctx.lineWidth = 2;

// Drawing a rectangle
ctx.strokeRect(20, 20,	120, 60);

// Filling a rectangle with red
ctx.fillStyle = "#FF0000";
ctx.fillRect(180, 20, 120, 60);

// Filling and outlining a green rectangle
ctx.fillStyle = "#00FF00";
ctx.fillRect(20, 100, 120, 60);
ctx.strokeRect(20, 100, 120, 60);

// A blue rectangle, with the middle cleared out of it
ctx.fillStyle =	"#0000FF";
ctx.fillRect(180, 100, 120, 60);
ctx.clearRect(200, 110, 80, 40);