THE WORLD'S LARGEST WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

HTML canvas drawImage() Method

HTML canvas Reference HTML Canvas Reference

Image to use:

The Scream

Example

Draw the image onto the canvas:

Your browser does not support the HTML5 canvas tag.

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 Firefox Opera Google Chrome Safari

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

Examples

More Examples

Example

Position the image on the canvas, and specify width and height of the image:

Your browser does not support the HTML5 canvas tag.

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:

Your browser does not support the HTML5 canvas tag.

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:

Your browser does not support the HTML5 canvas tag.

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 HTML Canvas Reference