Load image from url and draw to HTML5 Canvas



You need to create an image object in JavaScript after that set the src.

However, you need to wait for the load event before drawing.

The following is the canvas:

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

var myImg = new Image();
img.onload = function() {
   context.drawImage(myImg, 0, 0);
};
img.src = 'https://www.tutorialspoint.com/images/seaborn-4.jpg?v=2';
Lakshmi Srinivas
Lakshmi Srinivas

Programmer / Analyst / Technician


Advertisements