Drawing an SVG file on an HTML5 canvas

To drawHTMLImageElements on a canvas element, use the drawImage() method.This method defines an Image variable with src=”mySVG.svg”, anduse drawImage on load.

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

Radhakrishna

Published on 20-Mar-2018 11:32:53

• Related Questions & Answers
• How to draw an SVG file on an HTML5 canvas?
• World Map on HTML5 Canvas or SVG
• Drawing an image from a data URL to a HTML5 canvas
• Measure text height on an HTML5 canvas element
• Change colour of an image drawn on an HTML5 canvas element.
• Drawing an image in canvas using in JavaScript
• How to draw an ellipse in HTML5 SVG?
• HTML5 Canvas to PNG File
• What is the difference between SVG and HTML5 Canvas?
• Exporting an svg file from a Matplotlib figure
• How to draw grid using HTML5 and canvas or SVG?
• SVG drawing in React JS frontend
• HTML5 Canvas Font Size Based on Canvas Size
• How to draw an oval in HTML5 canvas?
• Draw part of an image inside HTML5 canvas