Latest

2D and 3D Particle Effects

At a recent “Full Frontal” JavaScript conference in England, Seb Lee-Delisle showed off some simple but effective 2D and 3D particle effects.

The effects started as a single particle, before going on to cover additive blending; creating your own smoke effects and how to do 3D.

2D and 3D particle effects

Push those pixels!

If you’re interested in particle effects, this is well worth a look. Through this link you’ll find the slides, live demos and the source on github to start you thinking about how you can create effective particle effects.

Wikipedia Knowledge Map

Ingo Straub has created this unique HTML5 canvas demo – a knowledge map graph which shows relations between different Wikipedia articles.

Wikipedia Knowledge Map

Knowledge is power

Type your search query in to the box on the right to see the knowledge map of your favourite subject. Overlaying the knowledge map are div elements containing the related article titles allowing you to read more information about the related subjects.

Math Mayhem

Hyperandroid has created this addictive math based game using CAAT, a director-based HTML5 canvas scene graph manager. The idea of the game is to select the number tiles to give the exact total that has been asked. The more bricks you use, the more points you’ll get.

Math Mayhem

Get your math on

Comments from the Author:

This game will stress your brain while having a nice game experience. The game basis are simple: add numbers up to get the exact asked number. Use more blocks to score higher. Use more distant blocks to enable multipliers and hence score even higher.

5 Performance Tips For Your HTML5 Games

Mozilla recently held a meetup in London for Open Web HTML5 games where Ernesto Jimenez presented “5 Tips For Your HTML5 Games” which discussed how to get better performance results from canvas.

Performance differences

Performance differences

The tips cover items such as making an efficient game loop, flickering, frame buffers and dirty rectangles. If your having performance issues with your canvas based games, this is a goood place to start.

There’s also a video of the talk available.

Browser Snow Globe

The holidays are coming and Graham is getting the party started with this browser activated snow globe. To make it snow in Santa’s world, simply shake the browser window!

It's snowing!

Comments from the Author:

A browser activated snow globe, shaking the browser makes it snow. The background and snow is drawn onto the canvas as it floats down.

Give it a try – if you have a Christmas themed canvas demo, make sure you send it in :)

BenCity

BenCity is a isometric terrain simulator created by Ben Green. The initial idea was to make a general environment for isometric graphic style games to be created using Javascript with HTML5 canvas, but it has since been expanded to allow the placement of buildings and trees.

Creating a landscape

Ben has a long term plan for the game, including having different types of buildings. This demo works best in Google Chrome.

Welcome to Canvas Demos

Home to applications, games, tools and tutorials that use the HTML 5 <canvas> element - which allows for dynamic scriptable rendering of bitmap images.

Browser check

  • canvas
  • canvas text

It looks as though your browser does not support canvas natively. Why not try one of these browsers?

Learn more about canvas support

Canvas news

Site news

Submit your demo

Submit your demo, and if we like it we'll feature it on Canvas Demos!