Created
September 5, 2025 23:59
-
-
Save cmdoptesc/96a48bd27ab9ab1aa915b62439a9df72 to your computer and use it in GitHub Desktop.
Canvas drawImage with SVG coloring
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>Canvas drawImage SVG test</title> | |
| <script> | |
| window.addEventListener("load", (event) => { | |
| const canvas = document.createElement('canvas'); | |
| canvas.width = 800; | |
| canvas.height = 600; | |
| canvas.style.border = '1px solid black'; | |
| document.body.appendChild(canvas); | |
| const context = canvas.getContext('2d'); | |
| context.save(); | |
| const imageElement = document.getElementById('arrow'); | |
| context.translate(canvas.width/2, canvas.height/2); | |
| const svgString = atob(imageElement.src.replace('data:image/svg+xml;base64,','')); | |
| const colorizedSvg = svgString.replace('<svg fill', '<svg color="#ff0000" fill'); | |
| // imageElement.src = `data:image/svg+xml;base64,${btoa(colorizedSvg)}`; | |
| context.drawImage( | |
| imageElement, | |
| -imageElement.width / 2, | |
| -imageElement.height / 2, | |
| imageElement.width, | |
| imageElement.height, | |
| ); | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <img id="arrow" width="60" height="60" class="hidden-when-printing" crossorigin="Anonymous" src="data:image/svg+xml;base64,PHN2ZyBmaWxsPSJ3aGl0ZSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIwIiB2aWV3Ym94PSIwIDAgNjAgNjAiIHdpZHRoPSI2MCIgaGVpZ2h0PSI2MCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48cGF0aCBkPSJNMjYuMDYgMTUuNDIzYTUgNSAwIDAxNC43NDQtNC45OTJsLjA0LS4wMDIuMTg0LS4wMDZINDUuNDJhNSA1IDAgMDE1LjAwMSA1djE0LjM2MWE1IDUgMCAwMS0xMCAuMDAxdi0yLjI5MkwxOC45NiA0OC45NTZsLS4wMTguMDE5LS4wMTkuMDE2LS4xMTIuMTA3LS4wMTcuMDE3LS4wMi4wMThhNSA1IDAgMDEtNy4wNjItNy4wNjNsLjAxNy0uMDE4LjAxOC0uMDE5LjEwNi0uMTExLjAzNS0uMDM3TDMzLjM1IDIwLjQyNGgtMi4zMTZsLS4wMjctLjAwMS0uMTU1LS4wMDQtLjAyMy0uMDAxLS4wMjUtLjAwMWE1LjAwMSA1LjAwMSAwIDAxLTQuNzQ0LTQuOTk0eiIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Ik00OC40MjEgMjkuNzg0YTMgMyAwIDAxLTYgMHYtNy4xMThMMTcuNTQ0IDQ3LjU0MWwtLjExMS4xMDZhMyAzIDAgMDEtNC4yMzgtNC4yMzdsLjEwNy0uMTEyIDI0Ljg3Ni0yNC44NzVIMzEuMDZsLS4xNTUtLjAwNWEzIDMgMCAwMTAtNS45OTFsLjE1NS0uMDA1aDE0LjM2YTMgMyAwIDAxMy4wMDEgM3YxNC4zNjF6IiBmaWxsPSJjdXJyZW50Q29sb3IiLz48L3N2Zz4=" style="display: none;"> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment