Drawing on <Canvas>
Have you ever had the urge to learn how to draw on your computer? Well, you may not realize it, but most computers come with a powerful drawing tool pre-installed. All you have to do is fire it up and start using it.
What is <canvas>?
A <canvas> is an HTML element that creates a region on a webpage that we can draw on using JavaScript. Because drawings are dynamic and scriptable, <canvas> is ideal for building diagrams, animations, interactive graphics, and data visualizations… but we can also use it to create artwork and still images.
How do we draw on <canvas>?
We draw on <canvas> by writing a script that tells our web browser how and where to draw lines, rectangles, circles, curves, and other basic shapes. These instructions are like steps in a recipe. All we need is a text editor to write our scripts and a modern web browser to display our drawings.
Why draw on <canvas>?
When I was a kid, I loved to draw. I used to doodle all the time. But as I got older, I expected my drawings to get more sophisticated, and—when they didn’t—I quit drawing altogether.
A few years ago, I started drawing on <canvas> for a few work projects. I simulated water molecules and spring scales, and created a tool for finding the area of polygons. The simple pleasure I got from drawing came flooding back… and I had a new hobby. Someday, I’d like to pick up a pencil and draw on paper again, but in the meantime, drawing on <canvas> brings me joy and enables me to tap into and express long-dormant facets of myself. I draw on <canvas> because:
- Drawing on <canvas> is different than drawing on paper. Simply switching to a new medium helps me reset my expectations and let go of old baggage. Making drawings that are animated, interactive, or data-driven lets me practice my drawing skills without putting all the pressure on the quality of my drawings.
- It’s possible to undo and revise endlessly. This is huge for anyone nervous about committing anything to paper and making a “mistake.” I revise <canvas> drawings all the time because I’m constantly building on and reusing them. I’ve become a better observer and I experiment with more techniques to create the effects I want.
- The internet is the biggest and most important publishing platform in the world, and <canvas> is a native web element. Learning to draw on <canvas> is like playing in a sandbox in the middle of a giant beach—take two steps over and you are using the same medium and tools as professional artists and graphic designers.
- Drawing on <canvas> is a solid introduction to web design, computer graphics, and computer programming. These are critical skills that we should be developing as lifelong learners. As an uncle and a teacher, I also feel that it is important to model fearlessness and a growth mindset to the kids in our lives.
How can I learn more?
At one point, I was thinking about designing a free online curriculum to help beginners learn how to draw on <canvas>. I shelved those plans to work on other projects, but I did create a few demos and tutorials. Check them out!