Javascript to Draw a SVG Graphic with Embed Image and Filters to Canvas?

[Heretic86]

I have been trying to draw an SVG Graphic to an HTML5 Canvas element, which has only been partly successful.  The image draws, but does not include the SVG Filter Effects that I am looking for.

Can anyone suggest how to draw a FILTERED SVG graphic to an HTML 5 Canvas?  I want to use the feColorMatrix filter before drawing it to my canvas...

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

(My current example code, probably gonna change a bunch)

Suggestions?  Solutions?

[grelf]

How about... create an offscreen image element, draw the svg image into that (browser should apply the filters), then draw that image into the canvas.

[Heretic86]

Thats the plan.

Currently drawing raw images on that demo page.

Edit:

So I can now get my SVG and convert it to a new Image(), but when I try to draw my image to my canvas, it doesnt draw!  I tested it out on the base64 source version of the image and that draws just fine.

(NOTE: once this works, the temporary stuff will be removed from the DOM and only the Canvas displaying the results will be displayed.)

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

On this link, can someone tell me why my Image is not drawing to the Canvas?

 

Edited March 11, 2022 by Heretic86

[Heretic86]

Might as well *bump this since I did get it to work, and this is at the top of the list.  Definitely had to improve my SVG skills to get it up and running.  I was not setting the values in the feColorMatrix correctly.

End result: