Images 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.drawImage(image, dx, dy);
context.drawImage(image, dx, dy, dw, dh);
context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);

  • Draws the given image onto the canvas.
  • dx & dy are the destination location to draw the image at.
  • dw & dh are the destination size of the image which can be used to stretch the image.
  • sx & sy are the source location from which to get the data.
  • sw & sh are the width and height of the area to copy from the source image.

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

// Load an image
var flag = new Image();
flag.src = 'http://blog.burlock.org/files/html5/saflag.png'

// Draw the full image.
ctx.drawImage(flag, 60, 20);

// Shrink the image down to half the size.
ctx.drawImage(flag, 60, 140, 100, 50);

// Draw only the piping shrike (bird) part of the flag.
ctx.drawImage(flag, 125, 25, 50, 50, 60, 210, 50, 50);