HTML canvas drawImage() Method
Image to use:
Example
Draw the image onto the canvas:
JavaScript:
window.onload = function() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
};
Try it Yourself »
Browser Support
The numbers in the table specify the first browser version that fully supports the method.
| Method | |||||
|---|---|---|---|---|---|
| drawImage() | Yes | 9.0 | Yes | Yes | Yes |
Definition and Usage
The drawImage() method draws an image, canvas, or video onto the canvas.
The drawImage() method can also draw parts of an image, and/or increase/reduce the image size.
Note: You cannot call the drawImage() method before the image has loaded. To ensure that the image has been loaded, you can call drawImage() from window.onload() or from document.getElementById("imageID").onload.
JavaScript Syntax
Position the image on the canvas:
| JavaScript syntax: | context.drawImage(img,x,y); |
|---|
Position the image on the canvas, and specify width and height of the image:
| JavaScript syntax: | context.drawImage(img,x,y,width,height); |
|---|
Clip the image and position the clipped part on the canvas:
| JavaScript syntax: | context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height); |
|---|
Parameter Values
| Parameter | Description | Play it |
|---|---|---|
| img | Specifies the image, canvas, or video element to use | |
| sx | Optional. The x coordinate where to start clipping | Play it » |
| sy | Optional. The y coordinate where to start clipping | Play it » |
| swidth | Optional. The width of the clipped image | Play it » |
| sheight | Optional. The height of the clipped image | Play it » |
| x | The x coordinate where to place the image on the canvas | Play it » |
| y | The y coordinate where to place the image on the canvas | Play it » |
| width | Optional. The width of the image to use (stretch or reduce the image) | Play it » |
| height | Optional. The height of the image to use (stretch or reduce the image) | Play it » |
More Examples
Example
Position the image on the canvas, and specify width and height of the image:
JavaScript:
window.onload = function() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10, 150, 180);
};
Try it Yourself »
Example
Clip the image and position the clipped part on the canvas:
JavaScript:
window.onload = function() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 90, 130, 50, 60, 10, 10, 50, 60);
};
Try it Yourself »
Example
Video to use (press Play to start the demonstration):
Canvas:
JavaScript (the code draws the current frame of the video every 20 milliseconds):
var v = document.getElementById("video1");
var c = document.getElementById("myCanvas");
var ctx = c.getContext('2d');
var i;
v.addEventListener('play',function() {i=window.setInterval(function()
{ctx.drawImage(v,5,5,260,125)},20);},false);
v.addEventListener('pause',function() {window.clearInterval(i);},false);
v.addEventListener('ended',function() {clearInterval(i);},false);
Try it Yourself »
❮ HTML Canvas Reference
