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:

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!