Sometimes, we want to draw an image from a data URL to a canvas with JavaScript.
In this article, we’ll look at how to draw an image from a data URL to a canvas with JavaScript.
How to draw an image from a data URL to a canvas with JavaScript?
To draw an image from a data URL to a canvas with JavaScript, we call the drawImage
method.
For instance, we write
const myCanvas = document.getElementById("my_canvas_id");
const ctx = myCanvas.getContext("2d");
const img = new Image();
img.onload = () => {
ctx.drawImage(img, 0, 0);
};
img.src = strDataURI;
to get the canvas with getElementById
.
Then we get the context with getContext
.
Next we create an img element with the Image
constructor.
We set its onload
property to a function that calls drawImage
to draw the img
element onto the canvas when the image is loaded.
Then we set img.src
to a string with the image URL to load the image.
Conclusion
To draw an image from a data URL to a canvas with JavaScript, we call the drawImage
method.