Latest

ParCycle

Mr Speaker has created a fully featured particle system – a visual feast for the eyes. In his own words, the system features “lots of particles, lots of colours, lots of fluffy clouds of pixels!”

Pretty particle effects

The demo is based on a particle system created in objective C for the iPhone by 71squared, with some new additional parameters. The demo allows you to change the particle bounce speed; the number of particles; the size; randomness; spread; sharpness; lifespan; speed; angle; gravity; colour and blending mode of the demo.

On top of all this, Mr Speaker has added an interesting save and load mechanic incorporating Twitter. Saving gives you the text to tweet the settings you have together with the #parcycle hash tag (sadly it doesn’t tweet direct to Twitter itself – you have to copy and paster). Loading will pull a list of recent #parcycle tweets and allow you to reload them.

Frog Log

Jimmy D has created this interesting ‘frogs on a log’ balancing game using Canvas for the Mix 10k smart coding competition. The idea of the game is simple: balance all the frogs on the log without them falling off.

Ribbit

Comments from the Author:

For some reason these frogs forgot how to swim. Help the frogs stay on the log. There are 4 types of frogs and each behave differently. Drag the frogs and logs (or click) with precision to save our frogs.

L-System Turtle Fractal Renderer

Kevin Roast has finished tripping over peppers and created a Lindenmayer System Turtle Fractal Renderer. Canvas is used as the output of the rendering engine.

Tree-mendous

Tree-mendous

The recursive nature of the L-system rules leads to self-similarity and thereby fractal-like forms which are easy to describe with an L-system. Plant models and natural-looking organic forms ‘grow’ and becomes more complex by increasing the iteration level of the form.

We’ve covered Lindenmayer Systems in a previous demo, but this one allows you to specify/modify the parameters and also comes with some pretty shrubery examples.

Waterfall

Waterfall by Lionel Tardy is a fairly simple concept for a canvas demo, yet is absolutely mesmorising to look at. I’ve already lost far too much time with this one, it’s about time someone else got hooked watching the balls fall! The idea of this demo is simple – balls fall from both sides of the screen on to a random terrain. As both the terrain and the background are the same colour, the terrain is only revealed once the balls have fallen.

It's so beautiful...

Waterfall uses the Box2DJS physics library and works best in Chrome.

Pool Table Games

Different people use different methods to learn a new technology. For Dave Whipp, he decided to teach himself JavaScript and canvas by creating a pool game. The game uses JavaScript for the physics and canvas to display the output.

Yellow falls a little behind

There are a couple of different modes available to play – 9-ball, 8-ball and 1-ball. Playing is simple: to take a shot, click on the white cue ball and hold, dragging the cursor in the direction you wish to shoot. Relative to the direction of the shot, hitting the white ball above and below the center will induce forward and reverse spin; while hitting left and right will add side spin.

Leaf Transform

Andrés Fernández has used canvas to create a simple 3D simulation of a leaf floating within the forest.

A leaf falls within the forest

The demo places the leaf in a canvas on a forest background modifying its transformation matrix to give it the appearance of floating.

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!