Leon Atherton

Leon is a developer at IDRsolutions and product manager for BuildVu. He is responsible for managing the BuildVu product strategy and roadmap, and also spends a lot of his time writing code to build new features, improve functionality, fix bugs, and improve the testing for BuildVu.

How to draw SVG on HTML 5 Canvas and why you might want to

51 sec read

One of the limitations of shapes in HTML 5 canvas is that only one fill rule is supported, which can lead to shapes not appearing correctly when you want to convert from another format that supports multiple fill rules to HTML 5, as we do for our PDF to HTML5 Converter.

I was recently experimenting with workarounds to solve this issue (which I will talk about in an article this Wednesday (so stay tuned)), and had the idea of using SVG (which supports both winding rules) to define the shapes, then drawing the SVG to canvas.

I was pleasantly surprised to find that HTML 5 canvas does indeed support this, so I am going to share how.

First off, you need an SVG file with something in it. To make my life easy, I am going to borrow a winding rule example from w3C SVG 1.1.

There are two ways I found that this can be achieved. The first is to define the SVG with an img tag, then on the canvas grab that element and use the drawImage method. The second is to define an Image variable with src=”mySVG.svg”, and use drawImage on load.

Method 1:

<script type="application/javascript">// <![CDATA[
function draw1() {
    var canvas=document.getElementById("pdf1");
    var pdf=canvas.getContext("2d");
    pdf.drawImage(document.getElementById("SVG") ,0,0);
}
// ]]></script><img id="SVG" style="display: none;" src="http://www.w3.org/TR/SVG11/images/painting/fillrule-evenodd.svg" alt="SVG Even-Odd Winding Rule Example" width="1200" height="400" />

Method 2:

<script type="application/javascript">// <![CDATA[
function draw1() {
    var canvas=document.getElementById("pdf1");
    var pdf=canvas.getContext("2d");
    var img = new Image;
    img.onload = function(){ pdf.drawImage(img,0,0); };
    img.src = "http://www.w3.org/TR/SVG11/images/painting/fillrule-evenodd.svg";
}
// ]]></script><canvas id="pdf1" width="1200" height="400"></canvas>

Important Note: This works well in Firefox, Chrome & IE, but it was not working on Opera or Android when I tried.

This post is part of our “SVG Article Index” in these articles, we aim to help you build knowledge and understand SVG.

Leon Atherton

Leon is a developer at IDRsolutions and product manager for BuildVu. He is responsible for managing the BuildVu product strategy and roadmap, and also spends a lot of his time writing code to build new features, improve functionality, fix bugs, and improve the testing for BuildVu.

Converting your PDF files to SVG with PDF2SVG

Last month we announced an updated product range for 2018 that aims to simplify the lineup and offer a choice between a complete off-the-shelf...
Leon Atherton
1 min read

Converting your PDF files to HTML5 with PDF2HTML5 

Recently we announced our updated product range for 2018 and are introducing two new products named PDF2HTML5 and PDF2SVG along with rebranding some existing...
Georgia Ingham
3 min read

4 Replies to “How to draw SVG on HTML 5 Canvas and…”

  1. Hi,
    nice article, can you tell me how can i render multiple objects which are there in SVG files, onto canvas.
    Means the image converted into the SVG file, in svg file, there are multiple path tags for each object which distributes image. I am not able to render that perfect image on canvas.
    Please help, if you any have any idea.

    1. As far as I am aware the methods in the article would render the full content of the SVG file.

      I recommend that you post to StackOverflow what you are trying to do, what you have tried and what’s not working, as it’s a much nicer format for this kind of thing.

  2. I have a 900+ line SVG with lots of styling included in the SVG file. For that styling to work, the SVG has to be inline. It works great in everything except for IE up to V11. Edge works fine. IE makes the SVG very tiny, and I’ve been told I can use canvas to fix that, but I need canvas to call the SVG code into play, not the file, if that makes sense. Is there anyway to use canvas to pull in the file as code? Perhaps through an SSI include command?

Leave a Reply

Your email address will not be published. Required fields are marked *