Displaying an Image

Here is the situation. You have an image on your server that you’d like to display inside your canvas element. From the previous section, you kinda know that there are two steps involved. You also know that the drawImage method is going to be used somewhere. If you are with me so far, that’s good! The next few sections will be a breeze.

Finding an Image

The first thing you need is an image to display. You can display almost any image format your browser supports such as GIF, JPEG, PNG, SVG, etc. For walking through all of this with you, the image I will be using looks as follows:

Get hands-on with 1200+ tech skills courses.