How to draw an image from url on HTML canvas?

Canvas is one of the most interesting feature in HTML. This article discusses how to draw image from url on html canvas using javascript. If you are reading this without knowing what HTML canvas is, you can learn more about the canvas basics. Or else, proceed to the below section. The complete code is provided just below and the breakdown what each of them does follows.

You can learn the complete breakdown of the code below.

1. Defining HTML canvas tag

The above code will create a canvas element inside your body tag. It’s where the image you load will appear. The ‘id’ attribute is a must as it will be used to access the canvas from the javascript. The width and height attribute of the canvas can be provided which should be the dimension you want your image to be in.

2. Defining canvas and contest object

The above code is placed inside your javascript or inside your scipt tag. This code defines the canvas(named as myCanvas) and context(named as myContext). The context object is an object with properties and methods that helps us to do actions in the canvas.

3. Loading and drawing Image

Next, we create a Image element(named as myImage) and assigns an image url as the image source. And, once the image is fully loaded, the context(myContext) draws the image(myImage) on the canvas(myCanvas) with the width and height of canvas provided inside the canvas tag in html. Optionally, you can also add width and height of canvas inside the javascript instead of providing it in the html canvas tag as shown below. If both are provided, the one inside javascript will be considered.