Drawing an SVG file on an HTML5 canvas

To draw HTML Image Elements on a canvas element, use the drawImage() method. This method defines an Image variable with src = "mySVG.svg", and use drawImage on load.

var myImg = new Image();
myImg.onload = function() {
   ctx.drawImage(myImg, 0, 0);
img.src = "http://www.example.com/files/sample.svg ";

Updated on: 24-Nov-2023

1K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started