Canvas Demos

2D/3D Chess

Andi Smith — Fri, 13 Aug 2010 21:30:20 +0000

Back in March 2009, we featured a 3D Chess game by Jacob Seidelin whereby two human players could play a game of chess on a 3D board. Since then, Stefano Gioffré has been busy improving the original base game with a 2D version (not canvas) and a computer controlled opponent.

2D/3D Chess

Can you beat the computer?

FlowerPower

Andi Smith — Fri, 13 Aug 2010 09:30:58 +0000

Inspired by nature – FlowerPower is a simple yet beautiful drawing tool which uses blooms as brushes, created by Mhepekka.

Canvas Demos' Flower Power

In this demo, you can adjust the size, the number of petals; adjust the bezier stretch factor and select from several pallettes of different coloured flowers.

JSLander

Andi Smith — Thu, 12 Aug 2010 21:30:20 +0000

Jason Brown has created a clone of Atari’s Lunar Lander called JSLander. As the name suggests, the game is developed in JavaScript using the canvas element for rendering the game display, including the text.

A successful landing?

Press Space to start the game; then A to increase the thrust; Z to decrease the thrust and the left and right cursor keys to turn left and right.

Comments from the Author:

To land without crashing your velocity cannot be faster than 6, for a perfect landing your velocity cannot be over 3. Your angle must be between 5 and 0. Once you run out of fuel, your landing days are over.

Charact-o-matic

Andi Smith — Thu, 12 Aug 2010 09:30:27 +0000

Robin Vernau’s Charact-o-matic has a distinctly retro futuristic about it.

Retro futuristic 3D text

Type the text you wish to display in to box on the bottom left, and then use the controls scattered around the display area to change the 3D effect.

Robin Vernau

deviantART Muro

Andi Smith — Wed, 11 Aug 2010 21:30:45 +0000

The creators of deviantART have embraced HTML5 within their new drawing application which uses the canvas element and allows their users to produce artwork in their browser.

"The future is coming" by nuevemonos using deviantArt Muro

Comments from the Authors:

From start to finish, deviantART Muro allows users to create complete works of art in ways never before realized by digital drawing programs. deviantART Muro already boosts standard and interactive brushes, full-blown layer capabilities, and the ability to upload directly to your deviantART account, but we’ve also left room for expansion. You can expect to see many features and functions added in the coming weeks and months.

21 brushes, each uniquely programmed
Basic and Pro modes, both free
Intuitive layout and functionality
Supports all HTML5-enabled browsers including the iPad
Submit drawings directly to your deviantART Gallery
Convenient design allows more focus on your art
Join fellow deviants in a public forum to share drawings
Start private threads in your group’s Admin Area and enjoy picture comments

jTenoriOn

Andi Smith — Wed, 11 Aug 2010 09:30:01 +0000

Joshua Koo has created this canvas implementation of the Tenori-On made by Yamaha. The Tenori-On is a hand-held interface with a surface of 256 LED buttons that glow as you access different sounds and texturesover an infinitely repeating sequence of notes. Click or Drag to play and create music with shapes, lights, smokes and colors.

Beautiful Music

Comments from the Author:

I use the the Sion Library for the audio, creating a JS to AS bridge to generate sounds. Howeveer, with the still-in-progress Mozilla Audio Data API, one can easily modify this program to run fully in javascript soon.

Lightning Weather

Andi Smith — Tue, 10 Aug 2010 21:30:28 +0000

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

Lightning

Comments from the Author:

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

Sand Trap

Andi Smith — Tue, 10 Aug 2010 09:30:01 +0000

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.

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

Andi Smith — Mon, 09 Aug 2010 21:30:52 +0000

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.

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

Andi Smith — Mon, 09 Aug 2010 09:30:45 +0000

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.

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!