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.
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.
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.
Latest posts by Leon Atherton (see all)
- Making a Simple Basecamp Chatbot with NodeJS - November 29, 2017
- My Business of Software Conference Experience – BoS Europe 2017 - June 7, 2017
- Do you still need IE8 support in JPDF2HTML5? - February 8, 2017
- JPDF2HTML5 2016 Roundup and looking ahead to 2017 - December 20, 2016
- What Chrome 45 dropping NPAPI Plug-in support means - September 10, 2015