Canvas Pocket Reference

Name

CRC.drawImage() — draws an image

Synopsis

void drawImage(image, float dx, float dy)
void drawImage(image, float dx, float dy,
               float dw, float dh)
void drawImage(image, float sx, float sy,
               float sw, float sh,
               float dx, float dy,
               float dw, float dh)

Arguments

image

The image to be drawn. This should be a document element representing an <img>, <canvas>, or <video> tag. You can also use offscreen images created with the Image() constructor.

dx, dy

The point on the destination canvas at which the upper-left corner of the image is drawn.

dw, dh

The width and height at which the image should be drawn onto the destination canvas. If these arguments are omitted, the image will be copied at its natural size.

sx, sy

The upper-left corner of the region of the source image that is to be drawn. These arguments are measured in image pixels. Specify these arguments if you want to copy only a portion of the source image.

sw, sh

The width and height, in image pixels, of the region of the source image that is to be drawn onto the canvas.

Description

There are three variants of this method. The first copies the entire image to the canvas, placing its upper-left corner at the specified point and mapping each image pixel to one unit in the canvas coordinate system. The second variant also copies the entire image to the canvas but allows you to specify the desired width and height of the image in canvas units. The third variant is fully general: it allows you to specify any rectangular region of the image and ...