Drawing Rectangles (and Squares) on the Canvas

When drawing shapes on the canvas, you can actually go really REALLY far without ever having to draw a rectangle. The reason for that is simple. Rectangles are terrible things that nobody should ever have to deal with:

Putting my irrational hatred for our rectangular brethren aside, a rectangle is a shape that you must learn to properly represent on a canvas. Even if you can never envision yourself using rectangles, remember - squares are rectangles as well. They are rectangles whose sides are all the same size. In this short tutorial, we’ll walk through the basics of how to draw rectangles inside a canvas element.

Onwards!

Brief Intro to Canvas

The canvas element allows you to programmatically place pixels on the screen. It does all of this by expecting you to specify simple (and often tedious) draw commands that mimic the path a pen would take on a piece of paper. It’s not as boring as I am making it out to be, but it’s no episode of Game of Thrones either.

The DOM vs. Canvas article gives you better idea of why the canvas does things the way it does.