HTML canvas drawImage() Method
Definition and Usage
drawImage() The method draws an image, canvas, or video on the canvas.
drawImage() The method can also draw certain parts of the image, as well as/increase or decrease the size of the image.
Instance
Example 1
Image to be used:
Draw the image on the top of the canvas:
JavaScript:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("tulip");
ctx.drawImage(img, 10, 10);
Tip:More examples are provided at the bottom of the page.
Syntax
JavaScript Syntax 1
Position the image on the canvas:
context.drawImage(img,x,y);
JavaScript Syntax 2
Position the image on the canvas and specify the width and height of the image:
context.drawImage(img,x,y,width,height);
JavaScript Syntax 3
Cut the image and position the cut part on the canvas:
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
Parameter value
| Parameter | Description |
|---|---|
| img | Specify the image, canvas, or video to be used. |
| sx | Optional. The x coordinate position to start cutting. |
| sy | Optional. The y coordinate position to start cutting. |
| swidth | Optional. The width of the cut image. |
| sheight | Optional. The height of the cut image. |
| x | The x coordinate position of the image placed on the canvas. |
| y | The y coordinate position of the image placed on the canvas. |
| width | Optional. The width of the image to be used. (Stretch or shrink the image) |
| height | Optional. The height of the image to be used. (Stretch or shrink the image) |
More examples
Example 2
Position the image on the canvas and specify the width and height of the image:
JavaScript:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("tulip");
ctx.drawImage(img, 10, 10, 240, 160);
Example 3
Cut the image and position the cut part on the canvas:
JavaScript:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 90, 130, 90, 80, 20, 20, 90, 80);
Example 4
Video to be used (press the play button to start the demonstration):
Canvas:
JavaScript (every 20 milliseconds, the code will draw the current frame of the video):
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,0,0,270,135)},20);},false);
v.addEventListener('pause',function() {window.clearInterval(i);},false);
v.addEventListener('ended',function() {clearInterval(i);},false);
Browser Support
The numbers in the table indicate the first browser version to fully support this property.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Note:Internet Explorer 8 and earlier versions do not support the <canvas> element.
