Search w3schools.com:

SHARE THIS PAGE

HTML canvas drawImage() Method

HTML canvas Reference HTML Canvas Reference

Image to use:

The Scream

Example

Draw the image onto the canvas:

YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript:

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.

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:

YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript:

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:

YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript:

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:

yourbrowserdoesnotsupportthecanvastag

JavaScript (the code draws the current frame of the video every 20 millisecond):

var v=document.getElementById("video1");
var c=document.getElementById("myCanvas");
ctx=c.getContext('2d');
v.addEventListener('play',function() {var 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

Your suggestion:

Close [X]

Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]