Canvas element 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

unsigned long width
unsigned long height

  • Setting the canvas width to itself will clear the canvas
  • Returns the width or height of the canvas element in pixels.

context = canvas.getContext (contextId)

  • contextID must be one of '2d' or '3d'
  • Returns a context object providing access to the drawing API.
  • Will return NULL if the contextID is not supported or invalid.

url = canvas.toDataURL ( [ type, ... ] )

  • type must be one of 'image/png' or 'image/jpeg', defaulting to 'image/png' if not specified or invalid.
  • Returns a data: URL for the canvas image, effectively a "snapshot" of it's state when called.
  • Additional parameters specify properties of the selected type

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 canvas

// Draw an outlined yellow circle
ctx.beginPath();
ctx.arc(160, 100, 95, 0, Math.PI*2, false);
ctx.closePath();
ctx.fillStyle = "#FFFF00";
ctx.fill();
ctx.strokeStyle = "#000000";
ctx.stroke();

// Draw the mouth
ctx.fillStyle = "#000000";
ctx.beginPath();
ctx.arc(160, 100, 75, 0, Math.PI+(Math.PI*0)/2, false);
ctx.closePath();
ctx.fill();

// And a couple of eyes
ctx.beginPath();
ctx.arc(135, 60, 15, 0, Math.PI*2, false);
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.arc(185, 60, 15, 0, Math.PI*2, false);
ctx.closePath();
ctx.fill();