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.