Using Multiple HTML5 Canvases as Layers

DEMO Here’s our finished canvas with full source code. The reasons why you would want to layer multiple canvases on top of each other are many but they all have a common root. There is a requirement in the W3C definition of the 2d context… There is only one CanvasRenderingContext2D object per canvas, so calling […]

Continue reading

Slicing Spritemaps and Parallax Scrolling on the HTML5 Canvas

In this example we will look at slicing images with the drawImage() method of a 2d canvas context. We’ll use two images that are larger than the canvas to create a parallax scrolling effect that is common in 2d games and also another image as a spritemap consisting of three sprites to show how to […]

Continue reading

Make a Maze Game on an HTML5 Canvas

UPDATE: 8-28-2013 This post is expanded on in the new post ‘Build Responsive Games For Mobile Phones, Tablets and Computers with HTML5 Canvas’ One of the best ways to learn how to program in any language is to make a game and then change the code to create different variations on the game. I learned […]

Continue reading

Moving Shapes on the HTML5 Canvas With the Keyboard

In order to make games using an HTML5 canvas element, you need to be able to detect user input. This post shows how to capture keystrokes on the keyboard and use them to manipulate shapes on the canvas. This example is coded for readability and not for optimized operation. All you need is a text […]

Continue reading

Simple Animation in the HTML5 Canvas Element

HTML5 is generating all kinds of buzz these days. Some of the buzz is about HTML5 being a replacement for Adobe’s Flash. I don’t think it’s there yet but it’s certainly on the way to changing the way content is presented on the web. This is a description of a very simple animation in an […]

Continue reading