Javascript Draw SVG with Filters to Canvas?

[Heretic86]

Im having some trouble getting an SVG Image to draw to Canvas.

SVG has some filter effects cant be done on a Canvas. Namely feColorMatrix.

So far, I am able to create a new Image() from data:image/svg+xml;base64, but once I have that image, I am not able to draw that image into my Canvas.

https://www.webucate.me/svg4.html

Can someone tell me what I am doing wrong?

[maxxd]

If you're dealing with SVGs I highly recommend looking at GreenSock - it abstracts away a lot of the annoying crap you have to deal with when using SVGs and canvas.

[kicken]

Wrapping the call to drawImage in a setTimeout fixed the problem in my tests.  I'd guess you need the delay to give the browser a chance to render the image before you can draw it.