JavaScript: The Definitive Guide, 5th Edition

Name

CanvasRenderingContext2D.drawImage( ): draw an image

Synopsis

void drawImage(Imageimage, float x, float y)
void drawImage(Image image, float x, float y,
               float width, float height)
void drawImage(Image image, integer sourceX, integer sourceY,
               integer sourceWidth, integer sourceHeight,
               float destX, float destY,
               float destWidth, float destHeight)

Arguments

image

The image to be drawn. This must be an Image object representing an <img> tag, or an offscreen image or a Canvas object.

x, y

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

width, height

The size at which the image should be drawn. Specifying these arguments causes the image to be scaled.

sourceX, sourceY

The upper-left corner of the region of the image that is to be drawn. These integer arguments are measured in image pixels.

sourceWidth, sourceHeight

The dimensions, in image pixels, of the region of the image that is to be drawn.

destX, destY

The canvas coordinates at which the upper-left corner of the image region is to be drawn

destWidth, destHeight

The canvas dimensions at which the image region should be drawn.

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 ...