In HTML5, canvas drawImage() function is used to display an image or video on canvas. This function can be used to display the whole image or just a small part of the image. But, image has to be loaded first to load it further on canvas.
Syntax:
context.drawImage(img, x, y, swidth, sheight, sx, sy, width, height);
Parameter Values:
- img: It indicates the image or video to draw on canvas.
- x: It indicates the x-coordinate where image has to be placed.
- y: It indicates the y-coordinate where image has to be placed.
- swidth: It is optional parameter and indicates the width of the clipped image.
- sheight: It is optional parameter and indicates the height of the clipped image.
- sx: It is optional parameter and indicates x-coordinate where to start the clipping.
- sy: It is optional parameter and indicates y-coordinate where to start the clipping.
- width: It is optional parameter and indicates the width of the image to use.
- height: It is optional parameter and indicates the height of the image to use.
Example:
Output:
👁 Image
