Member-only story
Create Your Own HTML5 Canvas Toolkit With Vanilla JavaScript
A toolkit to help creators draw awesome shapes

Art and technology are two sides of the same coin. In web development, this duality is exemplified by the HTML5 <canvas>
element — a powerful tool that opens the doors for high-performance web interactives, games, complex animation, and data visualizations. That said, the on-ramp to using canvas can feel steep, as it can take many lines of code to even create simple shapes.
While HTML5 canvas libraries and frameworks can make working with canvas more straightforward, you can also create a custom toolkit for your own projects if you find yourself wanting to use canvas without having to depend on a third-party tool.
This tutorial will show you how to create a toolkit for drawing shapes on HTML5 canvas. We will create two methods — one for drawing a circle and one for drawing a regular polygon — and enclose them in a function wrapper that can be referred to throughout your application.
Set Up the Workspace
For the HTML, let’s have a div
containing a canvas
element.
<div id="root">
<canvas id="myCanvas" width="200" height="200">
</canvas>
</div>