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.
Top comments (0)