HTML5 draw image on cavas with example

Hello,

HTML5 canvas is such a good subject to write on and to learn. Eveyday you learn something new. Today we will find out how we can draw an image on our canvas. We can use this feature to set a background image to our drawing if we like.

Here is our final result as shown below

canvas draw image example

Now lets check how to do it.

Canvas Markup

The Javascript

Now lets look at our Javascript

 

 

As you can see that its that simple.

Few key points that you should keep in mind

  1. context.drawImage(imageElement,x,y) is the function we will use to draw actual image.
  2. It is important that image is loaded to be able to be drawn. That is why we used img.onload event.
  3. Path to image can be local, from internet, absolute or relative.

 

Anything that you draw after drawing the image will appear above the image. Like that way we wrote “hello jas” text.

In the next post I will show you how to save our canvas drawing to a file.

I hope that you found this post useful. Just in case I got any fact wrong please let me know. Learning together is something that is always helpful.

Cheers

VN:F [1.9.22_1171]
Rating: 0.0/5 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.