In this post we will create a simple pie chart that is easy to feed data to. This example is coded for readability and not for optimized operation. All you need is a text editor like notepad and an HTML5 friendly browser (I’m using Firefox 3.6). <!doctype html> <html> <head> <meta charset=”UTF-8″ /> <title>Canvas Test</title> [...]
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 [...]
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 [...]
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 [...]
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 C++ long ago by creating an elevator simulation game (thanks Tom Swan). It’s fun and it is the closest you can come to [...]
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 [...]