Category Archive: HTML5 Canvas

Sep 13

Chem Fight: js13KGames HTML 5 Chemistry Battle Game

Chem Fight Logo

Introducing Chem Fight I’m currently putting the final touches on my latest HTML5 game: Chem Fight – the chemistry battle game. I started building the game about a month ago for the js13KGames competition. The goal of the competition is to build an HTML5 game in 13 Kilobytes or less when all the game’s code …

Continue reading »

Aug 16

Learning the Dart Structured Web Language by solving the water bucket logic problem

The Water Bucket Logic Problem You may have seen this logic problem: You have two buckets, one holds 3 gallons of water and one holds 5 gallons of water, there is also a source of water nearby. How do you measure out exactly 4 gallons? I was recently asked to build a program that determines …

Continue reading »

May 07

Stratiscape – A layered approach to HTML5 Canvas drawing

When I created my first HTML5 game I was surprised that the canvas element in HTML5 didn’t support multiple layers that could be painted on independently. Independent stacked layers would help in many situations when animating only a portion of a game (like the main character) so that the system doesn’t have to repaint backgrounds …

Continue reading »

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 »