Sometimes, we want to draw an SVG file on an HTML5 canvas with JavaScript
In this article, we’ll look at howw to draw an SVG file on an HTML5 canvas with JavaScript.
How to draw an SVG file on an HTML5 canvas with JavaScript?
To draw an SVG file on an HTML5 canvas with JavaScript, we use the Path2D
constructor.
For instance, we write
const path = new Path2D("M 100,100 h 50 v 50 h 50");
ctx.stroke(path);
to create a Path2D
object with the SVG path string.
Then we call ctx.stroke
with path
to draw the path.
ctx
is the canvas context we get from getContext
.
Conclusion
To draw an SVG file on an HTML5 canvas with JavaScript, we use the Path2D
constructor.