So I started over, using most of the stuff I had developed for that tutorial, I switched gears and created an SVG only paint block. I’m not going to write a step by step like I have before, I’m simply going to provide the repo and annotate what I think might be important. Hope this inspires/helps my fellow coder. Enjoy!
Demo of my svg paint block!
Here’s the repo: https://github.com/JimSchofield/SVG-paint-block
Here are some of my reflections after building out the svg paint block:
- How would we make this svg responsive? It’s more than setting the height/width in the styles, because in the SVGCanvas.js file, we need to know perfect x,y coordinates from clicks. Still thinking about this…
- We could very easily adapt this to allow for images and for typed text. This would be great for annotations of pictures/meme generation
Let me know what you think about my svg paint block. Let me know if you think you have insight in performace, SVGs performance, and/or if you know how to make this responsive!