Create grid patterns with canvas (blocks, diamonds, hex)

While making some experiments with a game, I felt the need to add a grid to the background, after much thinking I decided that canvas should be the “best” solutions for this.

However after creating a simple “square” grid I wanted also hexagons and diamond grids. And this is what I’m presenting here, how to create “blocks, diamonds and hexagon” grids with one convenient javascript class.

See the Pen Create grids by Michael Dobekidis (@netgfx) on CodePen.

Continue reading