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

Updated on: 28-Jan-2020

3K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started