DEV Community

loading...

Create Your Own HTML5 Canvas Toolkit With Vanilla JavaScript

Nevin Katz
I am a web and app developer who writes about programming, tech tools, and my experiences building things. By day, I work at Education Development Center.
・1 min read

Happy Thursday, everyone - wanted to reach out with a quick tutorial on how to build a flexible and easily readable HTML5 Canvas toolkit using Vanilla JavaScript.

A little background: when I started at EDC over 12 years ago, I came in as a Flash developer. Once Flash lost prominence, I learned more programming, dove headfirst into the web and app development space, and moved to developing interactives with JavaScript. Given the untimely demise of Flash, it was a good move.

The advent of HTML5 brought with it the canvas element, which could be controlled with JS. One of the challenges I found fairly early with the canvas API was that it was very low level - so I started trying HTML5 canvas frameworks like EaselJS and KineticJS. The former was awesome but felt overly complex for what I needed. And the latter lost support shortly after I tried using it. Because the framework landscape is ever-changing and does not always have the options I have in mind, I have found it empowering to create canvas utility methods that do exactly what I want and can be called easily.

In this article, I go over how to add methods for creating a circle and a polygon. That said, I'd be happy to write tutorials on other methods - such as text, animations, and images - if people are interested. Thanks, and have a great day.

Discussion (0)