HTML Reference Manual

Complete List of HTML Tags

HTML: <template> tag

HTML canvas drawImage() method

The drawImage() method provides multiple ways to draw images on Canvas.

HTML canvas Reference Manual

The picture to be used:

Online Example

Draw a picture on the canvas above:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML canvas drawImage() Method Usage-Basic Tutorial(oldtoolbag.com)</title>
</head>
<body>
<p>Image to use:</p>
<img id="scream" src="views.png">
<p>Canvas:</p>
<canvas id="myCanvas" width="300"height="200"style="border:1px solid #d3d3d3>
Your browser does not support HTML5　canvas tag.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d);
var img=document.getElementById("scream");
img.onload = function()
{
　　　　ctx.drawImage(img,10,10);
}
</script>
</body>
</html>

Test and See ‹/›

Browser Compatibility

IEFirefoxOperaChromeSafari

Internet Explorer 9Firefox, Opera, Chrome, and Safari support 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 a part of the image, and/or increase/Reduce the size of the image.

JavaScript Syntax

Position the image on the canvas:

JavaScript Syntax:	context.drawImage(img,x,y);

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

JavaScript Syntax:	context.drawImage(img,x,y,width,height);

Crop the image and position the cropped part on the canvas:

JavaScript Syntax:	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 cropping.
sy	Optional. The y coordinate position to start cropping.
swidth	Optional. The width of the cropped image.
sheight	Optional. The height of the cropped image.
x	Place the x coordinate position of the image on the canvas.
y	The y coordinate position of the image on the canvas.
width	Optional. The width of the image to use (stretches or shrinks the image).
height	Optional. The height of the image to use (stretches or shrinks the image).

Online Example

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

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML canvas drawImage() Method Usage-Basic Tutorial(oldtoolbag.com)</title>
</head>
<body>
<p>Image to use:</p>
<img id="scream" src="views.png">
<p>Canvas:</p>
<canvas id="myCanvas" width="250"height="300"style="border:1px solid #d3d3d3>
Your browser does not support HTML5　canvas tag.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d);
var img=document.getElementById("scream");
img.onload = function()
{
　　　　ctx.drawImage(img,10,10,150,180);
}
</script>
</body>
</html>

Test and See ‹/›

Online Example

Cut the image and position the cut part on the canvas:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML canvas drawImage() Method Usage-Basic Tutorial(oldtoolbag.com)</title>
</head>
<body>
<p>Image Application:</p>
<img id="scream" src="views.png">
<p>Canvas:</p>
<canvas id="myCanvas" width="300"height="1500"style="border:1px solid #d3d3d3>
Your browser does not support HTML5　canvas tag.
</canvas>
<script>
document.getElementById("scream").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);
};
</script>
</body>
</html>

Test and See ‹/›

Online Example

Video to use (press the play button to start the demonstration):

Canvas:

JavaScript (each 20 milliseconds, the code will draw the current frame of the video):

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML canvas drawImage() Method Usage-Basic Tutorial(oldtoolbag.com)</title>
</head>
<body>
<p>Video to use:</p>
<video id="video1"controls width="270"autoplay>
　　　　<source src="movie.mp4"type='video/mp4'>
　　　　<source src="movie.ogg" type='video/ogg#39;>
　　　　<source src="movie.webm" type='video/webm#39;>
</video>
<p>Canvas (code is shown below the20 milliseconds to draw the current video frame):</p>
<canvas id="myCanvas" width="270"height="135"style="border:1px solid #d3d3d3>
Your browser does not support HTML5　canvas tag.
</canvas>
<script>
var v=document.getElementById("video",1");
var c=document.getElementById("myCanvas");
ctx=c.getContext('2d39;);
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);　　
</script>
</body>
</html>

Test and See ‹/›

HTML canvas Reference Manual

HTML: <template> tag