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

Graphing Data in the HTML5 Canvas Element Part III

This is post 3 of a multipart series of posts. All of the code to try this example for yourself is included here but much of it is explained in the previous posts. The first and second parts can be found here. Graphing Data in the HTML5 Canvas Element Part I Graphing Data in the […]

Continue reading

CSS 3.0 Series: The radial-gradient Object

Radial gradiants are on the cutting edge of CSS . We’re going to be looking at some examples of their use and their current capabilities. In the previous post in this series we looked at linear gradients. The WebKit implementation of the radial gradient is just an extension of their linear gradient function while Mozilla […]

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

Understanding save() and restore() for the Canvas Context

At first, I had a hard time grasping the purpose and use of the save() and restore() methods of the canvas’ 2d context. It’s really very simple and here are some examples that can help you understand it better. Let’s look at an official definition of save() and restore() Each context maintains a stack of […]

Continue reading

CSS 3.0 Series: The linear-gradient Object

Most everyone agrees that a gradient background softens web pages and areas of web pages in a pleasing way. Many webmasters use a gradient somewhere on their website. This makes a CSS solution a good candidate to be adopted into web standards and used by all major browsers. The old/current way to add a gradient […]

Continue reading

How to Drag and Drop on an HTML5 Canvas

We explored using keyboard input to move a shape on an HTML5 canvas here http://html5.litten.com/moving-shapes-on-the-html5-canvas-with-the-keyboard/. Now we’ll take a look at using input from the mouse. With a few simple calculations, you can drag and drop shapes on the canvas with your mouse. UPDATE: I’ve added a companion post for IE compatibility. IE Compatible Canvas […]

Continue reading

CSS 3.0 Series: The border-radius Property

The border-radius Properties The border-radius CSS properties can be used to give borders rounded corners. The radius applies also to the background even if the element has no border. We’ll be working with code for three different implementations of the border-radius properties. Soon all browsers will use the W3C recommended format but for now they […]

Continue reading