Jump to content

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


Recommended Posts

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?

Link to comment
Share on other sites

Posted (edited)

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 by Heretic86
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...