YouTipMet Canvas Drawimage
[ Canvas Object](#)
## Image to Use:
## Example
Draw an 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 »](#)
* * *
## Browser Support
The drawImage() method is supported in Internet Explorer 9, Firefox, Opera, Chrome, and Safari.
**Note:** Internet Explorer 8 and earlier versions do not support the 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 the 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 |
| --- | --- |
| _img_ | Specifies the image, canvas, or video to use. | |
| _sx_ | Optional. The x coordinate position to start clipping. |
| _sy_ | Optional. The y coordinate position to start clipping. |
| _swidth_ | Optional. The width of the clipped image. |
| _sheight_ | Optional. The height of the clipped image. |
| _x_ | The x coordinate position to place the image on the canvas. |
| _y_ | The y coordinate position to place the image on the canvas. |
| _width_ | Optional. The width of the image to use (stretch or reduce the image). |
| _height_ | Optional. The height of the image to use (stretch or reduce the image). |
* * *
## More Examples
## Example
Position the image on the canvas, then specify the 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 »](#)
## 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 »](#)
## Example
Video to use (press play to start the demo):
(#)
Canvas:
yourbrowserdoesnotsupportthecanvastag
JavaScript (draws the current frame of the video every 20 milliseconds):
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 »](#)
* * Canvas Object](#)