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

• Related Questions & Answers
• Drawing an image from a data URL to a HTML5 canvas
• Draw part of an image inside HTML5 canvas
• HTML5 drawImage() method to draw image onto the canvas
• How to draw lines using HTML5 Canvas?
• Draw Bezier Curve with HTML5 Canvas
• Draw a shadow with HTML5 Canvas
• How to draw grid using HTML5 and canvas or SVG?
• Is HTML5 canvas and image on polygon possible?
• How to draw a rectangle on HTML5 Canvas?
• How to draw an oval in HTML5 canvas?
• How to draw large font on HTML5 Canvas?
• How to draw a quadratic curve on HTML5 Canvas?
• How to draw a star by using canvas HTML5?
• How to draw a Bezier Curve with HTML5 Canvas?
• Play video on canvas and preserve the last frame/image on HTML5 Canvas