10 Shapes to Extend HTML5 Canvas

Published Aug 14, 2013
JavaScript HTML5

Today I wanted to take a look at extending the HTML5 canvas object to add shapes to it. The canvas object comes with some basic functions allowing us to draw things like rectangles and lines but it doesn’t come packaged with even a more basic subset of shapes like circles, ellipses or rounded corners. I was creating a variety of shapes for the new wPaint 2.0 version I’m currently working on and thought I would share some of the functions I created.

The idea is to streamline the canvas object so that we can just make function calls like .rect(x, y, w, h), .ellipse(x, y, w, h), .roundedRec(x, y, w, h, radius) and so on. Below are 10 shape examples with a couple bonuses like fillArea and ninjaStar.

Also feel free to check out the GitHub page where you can add your own shapes or create an issue for suggestions or fixes for new or existing shapes.

ctx.fillArea(x, y, color)

ctx.ellipse(x, y, w, h)

ctx.roundedRect(x, y, w, h, radius)

ctx.diamond(x, y, w, h)

ctx.pentagon(x, y, w, h)

ctx.hexagon(x, y, w, h)

ctx.octagon(x, y, w, h)

ctx.star(x, y, w, h)

ctx.trapezoid(x, y, w, h)

ctx.parallelogram(x, y, w, h)

ctx.triangle(x, y, w, h)

ctx.ninjaStar(x, y, w, h)