CanvasRenderingContext2D.drawImage()
The
CanvasRenderingContext2D.drawImage()
method of the
Canvas 2D API provides different ways to draw an image onto the canvas.
Syntax
void ctx.drawImage(image, dx, dy);
void ctx.drawImage(image, dx, dy, dWidth, dHeight);
void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
Parameters
-
image
An element to draw into the context. The specification permits any canvas image
source (
-
sxOptional
The x-axis coordinate of the top left corner of the sub-rectangle of the source
-
syOptional
The y-axis coordinate of the top left corner of the sub-rectangle of the source
-
sWidthOptional
The width of the sub-rectangle of the source
-
sHeightOptional
The height of the sub-rectangle of the source
-
dWidth
The width to draw the
-
dHeight
The height to draw the
CanvasImageSource
), specifically, a
CSSImageValue
, an
HTMLImageElement
, an
SVGImageElement
, an
HTMLVideoElement
, an
HTMLCanvasElement
, an
ImageBitmap
, or an
OffscreenCanvas
.
image
to draw into the destination context. Use the 3- or 5-argument syntax
to omit this argument.
image
to draw into the destination context. Use the 3- or 5-argument syntax
to omit this argument.
image
to draw into the
destination context. If not specified, the entire rectangle from the coordinates
specified by
sx
and
sy
to the bottom-right corner of the
image is used. Use the 3- or 5-argument syntax to omit this argument.
image
to draw into the
destination context. Use the 3- or 5-argument syntax to omit this argument.
The x-axis coordinate in the destination canvas at which to place the top-left
corner of the source
image
.
The y-axis coordinate in the destination canvas at which to place the top-left
corner of the source
image
.
image
in the destination canvas. This allows
scaling of the drawn image. If not specified, the image is not scaled in width when
drawn. Note that this argument is not included in the 3-argument syntax.
image
in the destination canvas. This allows
scaling of the drawn image. If not specified, the image is not scaled in height when
drawn. Note that this argument is not included in the 3-argument syntax.
Exceptions thrown
-
INDEX_SIZE_ERR -
INVALID_STATE_ERR -
TYPE_MISMATCH_ERR -
NS_ERROR_NOT_AVAILABLE
The image is not loaded yet. Use
If the canvas or source rectangle width or height is zero.
The image has no image data.
The specified source element isn't supported.
.complete === true
and
.onload
to determine when it is ready.
Examples
Drawing an image to the canvas
This example draws an image to the canvas using the
drawImage()
method.
<canvas id="canvas"></canvas>
<div style="display:none;">
<img id="source"
src="rhino.jpg"
width="300" height="227">
</div>
JavaScript
The source image is taken from the coordinates (33, 71), with a width of 104 and a
height of 124. It is drawn to the canvas at (21, 20), where it is given a width of 87
and a height of 104.
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const image = document.getElementById('source');
image.addEventListener('load', e => {
ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);
});
Result