How to add an image to the canvas with JavaScript?

Spread the love

Sometimes, we want to add an image to the canvas with JavaScript.

In this article, we’ll look at how to add an image to the canvas with JavaScript.

How to add an image to the canvas with JavaScript?

To add an image to the canvas with JavaScript, we use the drawImage method.

For instance, we write

const canvas = document.getElementById("viewport");
const context = canvas.getContext("2d");

const baseImage = new Image();
baseImage.src = "img/base.png";
baseImage.onload = () => {
  context.drawImage(baseImage, 0, 0);
};

to get the canvas with getElementById.

Then we get the canvas context with getContext.

Next, we create a new img element with the Image constructor.

Then we set its src attribute by setting the src property.

We then set the onload property to a function that’s called when the image is loaded.

In it, we call drawImage to draw the baseImage.

Conclusion

To add an image to the canvas with JavaScript, we use the drawImage method.

Leave a Reply

Your email address will not be published.