DRAW AN IMAGE ON HTML5 CANVAS?

HTML5 CANVAS

DRAW AN IMAGE ON HTML5 CANVAS

Use HTML5 canvas’ drawImage method in JavaScript.

Discussion

To draw an image using HTML5 Canvas, we can use the drawImage() method which requires an image object and a destination point. The destination point defines the top left corner of the image relative to the top left corner of the canvas.

Since the drawImage() method requires an image object, we must first create an image and wait for it to load before instantiating drawImage(). We can accomplish this by using the onload property of the image object.

Definition

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.

Syntax

Position the image on the canvas:

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

Clip the image and position the clipped part on the canvas:

Parameter

Example

You may also like

Leave a Reply

Your email address will not be published. Required fields are marked *