Drawing an SVG file on a HTML5 canvas -

is there default way of drawing svg file onto html5 canvas? google chrome supports loading svg image (and using drawimage), developer console warn resource interpreted image transferred mime type image/svg+xml.

i know possibility convert svg canvas commands (like in this question), i'm hoping that's not needed. don't care older browsers (so if firefox 4 , ie 9 support something, that's enough).

edit november 5th, 2014

you can use ctx.drawimage draw htmlimageelements have .svg source in not browsers. chrome, ie11, , safari work, firefox works bugs (but nightly has fixed them).

var img = new image(); img.onload = function() {     ctx.drawimage(img, 0, 0); } img.src = "http://upload.wikimedia.org/wikipedia/commons/d/d2/svg_example_square.svg"; 

live example here. should see green square in canvas. second green square on page same <svg> element inserted dom reference.

you can use new path2d objects draw svg (string) paths (only works in chrome right now). in other words, can write:

var path = new path2d('m 100,100 h 50 v 50 h 50'); ctx.stroke(path); 

live example of here.

---

old posterity answer:

there's nothing native allows natively use svg paths in canvas. must convert or use library you.

i'd suggest looking in canvg:

http://code.google.com/p/canvg/

http://canvg.googlecode.com/svn/trunk/examples/index.htm