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
Internet Explorer 9, Firefox, Opera, Chrome, and Safari support the drawImage() method.
Note: Internet Explorer 8 and earlier versions, do not support the <canvas> element.
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 millisecond):
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