Latest web development tutorials
 

HTML canvas drawImage() Method

< 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

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:

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