Draw the image onto the canvas:
JavaScript:
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.
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.
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 | 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 » |
Position the image on the canvas, and specify width and height of the image:
JavaScript:
Clip the image and position the clipped part on the canvas:
JavaScript:
Video to use (press Play to start the demonstration):
Canvas:
JavaScript (the code draws the current frame of the video every 20 millisecond):