Latest
We all remember that episode of The Simpsons where Homer eats that really hot chili pepper and trips out. Well, Kevin Roast has decided that we all need some trippy peppers in our lives, and has created a canvas demo to supply such a thing!
Trippy Peppers uses a multiple sine-wave effect on an image of hot chili peppers combined with multiple canvas back buffers to generate the final image. Let your eyes drift slightly out of focus for maximum wibblyness.
Trippy...
You’ll need to use Safari 4 or Chrome for this demo, as Kevin jokes:
Firefox finds it too hot too handle!
But seriously, Kevin would appreciate any hints on why Firefox gets upset copying data between the multiple canvas image buffers. He seems to be having issues with putImageData().
View the Trippy Peppers demo
Yvo Schaap has created this incredibly addictive game where a single well placed click will decide whether you pass or fail. There are 12 levels each with a required number of balls that need to be detonated, all from your original explosion.
Explode my lovelies!
Play Chain Reaction
If you ever wanted a goldfish as a child – perhaps from one of those fairground stalls – but was never allowed, now’s your chance. Satoshi Nakajima has created a Gold Fish Simulator which simulates the famous flocking behavior of fish.
Lots of fishies
The application uses a canvas pre-rendering technique, which generates images of fish in array of off-screen canvas elements. It then uses a CSS transform to specify the location and direction of each fish.
The app runs on Safari (4.0 and later), Firefox (3.5 and later) and Google Chrome (4.0 and later).
View the Gold Fish Simulator
Matt West has ported a ZX Spectrum emulator to JavaScript using canvas to output the display. The emulator comes with 10 games to try, including Manic Miner and Jet Set Willy.
Matt comments:
Writing this wasn’t actually such a big deal – the Z80 core was ported from the one in Fuse, with the Perl-and-C-preprocessor-munging trickery still intact, and Javascript is syntactically close enough to C that that wasn’t a mammoth task… The rest is just creative abuse of the <canvas> element… it’ll take advantage of the putImageData interface to do the pixel pushing if available and fall back on drawing 1×1 pixel rectangles otherwise.
The classic Manic Miner
Controls are:
- Up: Q
- Down: A
- Left: O
- Right: P
- Button: Space
- Enter: Enter
Please ensure you follow the relevant laws regarding ROMs for your country before trying this demo.
Play JSSpeccy
As canvas comes closer and closer to replicating the features of Flash; canvas-based cartoons are beginning to appear. Starting with this one, featuring two characters called Tomte and Goat; who explain how you can make your own cartoons in canvas!
A taste of things to come?
The animation is nice and smooth with a couple of nice effects. Flash, get your coat, your number is (almost) up!
View the HTML5 Canvas Animation cartoon
Fabien Ménager has created a Canvas Text Javascript library which implements the three methods used to draw text on the canvas element (strokeText, fillText and measureText) to the browser versions which don’t already support it. That’s the Firefox 2/3.0, Internet Explorer 6+, Opera 9+, Safari 3.x and Chrome 1.0 browsers in the group.
Fabien discusses his aim when building the library:
The main goal of this implementation is to respect the specs given by the W3C and WHATWG for the HTML5 <canvas> tag.
Canvas Text doesn’t change the already implemented functions in Firefox 3.5+, Safari 4 and Chrome 2+ as these are already to spec and doesn’t require any other library except ExCanvas for Internet Explorer.
Sweet, sweet canvas text
Provided with the tool on the Canvas Text codebase are some examples of it working using positioning, animation, transformations and to show performance.
Check out the Canvas Text tool
