html - Draw SVG on HTML5 Canvas with support for font element

Question

Is there a good library for converting SVG to HTML canvas that supports the font element? I have already tried canvg, but it does not support Font.

Answer 1

Browsers that support HTML5 Canvas also support SVG pretty well themselves. As such, you could do this:

var img = new Image;
img.onload = function(){ myCanvasContext.drawImage(img,0,0); };
img.src = "foo.svg";

The only downside to this technique is that if the SVG is outside of your domain the canvas will become tainted; you will not be able to use getImageData() to read the resulting SVG, if that is your goal.

I've put an example of this technique on my server: http://phrogz.net/tmp/canvas_from_svg.html
I've tested this and verified that it works (and looks the same) on IE9, Chrome v11b, Safari v5, and Firefox v4.

[Edit] Note that:

1. Chrome and Firefox currently 'punt' on security and disallow you from reading the canvas (e.g. getImageData() or toDataURL()) after you draw any SVG to the canvas (regardless of the domain) these have been fixed

2. Firefox currently has a bug where it refuses to draw SVG to the canvas unless the SVG has height and width attributes specified.