Load image from url and draw to HTML5 Canvas

JavascriptWeb DevelopmentFront End Scripts

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';
Published on 10-Apr-2018 08:25:11