Tag Archive: HTML5

Apr 29

HTML5 Canvas Drawing Speed Testing using Stats.js and jsperf.com

Lately I’ve been doing some performance testing of different canvas drawing functions, I specifically wanted to test the performance of drawing radial gradients vs. arcs and images. To facilitate my testing I used Stats.js – a graphical performance monitor you can easily add to your sites to test milliseconds between javascript calls and frames per …

Continue reading »

Apr 10

Creating a Hex Grid for HTML5 Games in Javascript

In my last post, I described how to do some of the calculations for determining the required measurements to build a hexagon. Today I’ll show you how to take that a step further and build a hex grid or game-field out of those hexagons. Let’s start with the overview and pseudo-code for populating our grid …

Continue reading »

Apr 05

Fun with Hexagon Math for Games

Hexagons are great for game grids because, compared to the standard square grid, the distance from the center of a hex to any adjacent hex is the same (assuming you have a “Normal” hex with width to height ratio of 2:√3). In a square grid, moving from one square to an adjacent diagonal square is …

Continue reading »