Name
CanvasRenderingContext2D.drawImage( ): draw an image
Synopsis
void drawImage(Imageimage
, floatx
, floaty
) void drawImage(Imageimage
, floatx
, floaty
, floatwidth
, floatheight
) void drawImage(Imageimage
, integersourceX
, integersourceY
, integersourceWidth
, integersourceHeight
, floatdestX
, floatdestY
, floatdestWidth
, floatdestHeight
)
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 ...
Get JavaScript: The Definitive Guide, 5th Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.