Latest

Lightning Weather

Ivan Karev has been playing with the weather in this canvas demo. Click the canvas to generate the lightning effects.

Lightning

Lightning

Comments from the Author:

On the canvas it uses a perlin noise textures generator with some effects.

Sand Trap

In Sand Trap by Derek Detweiler, your goal is to get as much sand as you can out of the box and into the red pail at the bottom. Once the pail is overflowing with sand, you can progress to the next level.

Sand trap

Empty the sand from the box

You can rotate the box by clicking and dragging with the mouse or by using the left and right arrow keys. It’s harder than it looks!

Comments from the Author:

Sorry about the opening ads – it’s currently part of a game competition. In about 2.5 weeks I’ll be able to host it on my own site without the opening Flash sequence.

Procedural Drawing in Canvas

Thanks to a couple of different “build to a certain file size” web developer competitions (JS1k and JS10k), there is a great source of new canvas demos flowing through the community at the moment. Canvas is a great way of making something visually appealing in a small filesize. Steven Wittens has created one such demo for the JS1k competition using procedural drawing, and has written a tutorial that explains more about how procedural drawing works so that others can also learn the skill and start producing their own patterns.

procedural-drawing-in-canvas

Pretty procedural patterns

Comments from the Author:

This is classic procedural coding at its best: take a time-based offset and plug it into a random mish-mash of easily available functions like cosine and sine. Tweak it until it ‘does the right thing’. It’s a very cheap way of creating interesting, organic looking patterns.

Helicopter

Dale Harvey has recreated another classic game with the canvas element, following on from his recent Pacman game. This time it’s the turn of Helicopter. The idea of the game is to fly the helicopter through the level avoiding the walls and the obstacles. There is no end to the level, the idea is to get as high a score as possible.

Helicopter

Keep flying, avoid the obstacles

Comments from the Author:

The map scrolls from the right to left, your job is to not crash into the walls and avoid the obstacles for as long as possible. Hold the ENTER key or the Left Mouse Button to activate thrusters, this will make yur helicopter rise, when you release the helicopter will fall. Have fun!

UltraLight

Kevin Roast has created what he describes as “a mouse controlled wibbly sheet of real-time 3D polygons” using his self-developed library K3DCanvas. This wibbly sheet is then lit via real time lighting using the library.

Ultralight

Lighting the wibbly thing

Take a look!

Sinuous

Hakim El Hattab is one of the most active canvas experimentors out there and his latest offering, which comes in the form of an addictive game, doesn’t disappoint. The game itself is fairly simple looking, but it has a certain ‘one more go’ quality about it.

Sinuous

Just keep moving, just keep moving

How to play? Hakim’s instructions are fairly straightforward:

  1. Avoid red dots.
  2. Touch green dots for invulnerability.
  3. Use invulnerability to destroy red dots.
  4. Score extra points by moving around a lot.
  5. Stay alive.

Simple, eh? If only… Give it a try!

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!