Heretic86 Posted March 12, 2022 Share Posted March 12, 2022 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? Quote Link to comment https://forums.phpfreaks.com/topic/314594-javascript-draw-svg-with-filters-to-canvas/ Share on other sites More sharing options...
maxxd Posted March 12, 2022 Share Posted March 12, 2022 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. Quote Link to comment https://forums.phpfreaks.com/topic/314594-javascript-draw-svg-with-filters-to-canvas/#findComment-1594372 Share on other sites More sharing options...
Solution kicken Posted March 12, 2022 Solution Share Posted March 12, 2022 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. Quote Link to comment https://forums.phpfreaks.com/topic/314594-javascript-draw-svg-with-filters-to-canvas/#findComment-1594373 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.