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

Published on 10-Apr-2018 08:25:11