HTML Canvas Images

In this article, we will see HTML Canvas Images. We generally use images on our web page through <img> element. In this article, we will see HTML Canvas images in HTML and JavaScript. 

The drawImage() Method is used to embed images or video on Canvas. With this method, we can also change the height and width of the image and clip the image.

Image on Canvas

The image on Canvas refers to a visual representation or artwork created through the application of various pigments and brushstrokes on a canvas surface.

Example 1: The example shows the Image on Canvas with the original size of the image.

Output:

Example 2: The example illustrates an Image on Canvas with the custom width and height of the image.

Output:

Example 3: The example illustrates an Image on Canvas with the Custom size and clipped image.

Output: