Fork me on GitHub

HTML5 Canvas demos by Kevin Roast

GPU Shaders - Demos

A collection of GPU real-time rendering shader experiments.

After reading this article - I was inspired to have a go at some GPU programming for the first time - with the intention of learning the amazing real-time accelerated rendering technique known as 'ray marching'. A very clever technique described clearly in the article that allows amazing quality images to be generated on a modern GPU in real-time. The maths is really interesting and it's a lot of fun to experiment with.

The demos all use WebGL so require a good graphics processor and WebGL support in your browser.

JS1K - Demos

A collection of JS1K demo competition entries.

Demo entries are a maximum of 1024 bytes (not characters...) of JavaScript code and can use any trick in the book to get as small as possible but still work in modern browsers!

phoria.js

3D scenes in any HTML5 browser without WebGL!

A complete rewrite of my canvas 3D engine. Now able to manage complete 3D scenes with a fully positional camera, scene graph, lighting and rendering.

Some fun interactive demos to play with, including a nifty particle emitter and point lighting effects.

The demos will work on iOS and Android phone browsers in addition to all desktop HTML5 browsers.

CanvasMark 2013

HTML5 Canvas browser benchmarking tool.

Test the rendering performance of your HTML5 browser. Runs a number of graphical tests on the canvas 2D rendering features that are most used in HTML5 games, particularly image sprite rendering and alpha compositing.

The results depend heavily on the CPU and GPU power of your machine. CanvasMark is on Twitter.

Arena5 - Game

My latest HTML5 canvas game experiment - Winner of Canvas Innovation Prize in the Microsoft Dev Unplugged contest!

Updated to run at a full 60 frames-per-second with improved game performance.

It's more than a little "inspired" by Geometry Wars and similar, but that's not a bad thing...

A good test of canvas performance as it hits the browser hard with lots of glow effects and particle explosions.

Another example of my canvas 3D library - K3D in action!

Works best in Chrome and Safari, FireFox and IE struggle a bit with the shiny effects.

You can comment and rate the game as it is featured on the Google Chrome Experiments page.

Asteroids [Reloaded] - Game

An updated version of the classic Asteroids arcade game from 1979. Featuring ray-traced modern graphics and "retro" glowing vector graphic modes, exciting powerups and green glowing lasers oh yes.

Now with iPad touch controls and updated to run at a full 60 frames-per-second with retro styled sound effects.

The now world famous (ahem) Asteroids HTML5 Game has been featured on wired.com! Gosh.

The game has received over 300,000 visitors since the first version.

You can comment and rate the game as it is featured on the Google Chrome Experiments page.

HTML5 Canvas Scratchpad

A tool to help HTML5 developers to quickly try out Canvas 2D tests and demos in real-time!

JavaScript code is evaluated immediately and the output displayed in a Canvas element.

Some code examples and useful tutorial links are provided to get you started...

JS1K Spring - Demo

Demo entry for the JS1K - Spring 2013 competition.

A sunny spring scene with a field of flowers and an animated windmill.

Code is exactly 1020 bytes, just below the maximum 1024 bytes allowed.

View Source on the page to see the code.

JS1K Love - Demo

Demo entry for the JS1K - Love 2012 competition.

A trippy pink plasma field with a parametric heart curve effect.

Code is exactly 900 bytes and could probably be crushed down further but is well below the 1024 bytes needed anyway.

View Source on the page to see the original code.

As usual there are much more impressive entries than mine squeezed into 1K but still fun trying all the same.

HTML5 Logo - 3D Demo

The shiny new tongue-in-cheek HTML5 logo in glorious 3D!

I came across this sinister Flash demo and decided enough is enough, HTML5 canvas can do that, no problem.

The W3C group seem a little confused about the logo and feel a need to attach some significance to what it means, but I just like its cheesey 80's retro look.

There are some other good examples of the logo built in HTML5 only using CSS to generate a simple 3D effect, and an excellent old skool animated GIF, nice.

Animated Business Card

An experiment around an animated and interactive business card on an HTML5 canvas.

Elements of the design gently pulsate and can be nudged with the mouse.

Thanks to Michael Hawley for the design and inspiration for the animated interactive business card.

Plasma - Demo

Oldskool meets nuskool with a trippy plasma effect in HTML5 canvas!

You can tweak lots of fun settings for the effect using the built-in control panel.

Thanks to the DAT.GUI awesomeness for the amazingly easy to use JavaScript GUI library!

Warp Starfield - Demo

Demo entry for all-the-cool-kids-are-doing-it JS1K competition.

The JavaScript code is only 1007 bytes in length! Which is pretty impressive, or at least I thought it was until I saw some of the later entries in the competition managing to perform pretty much anything you can imagine in 1K and making this feel rather simple in comparison, bah. But hey it still looks nice.

Move the mouse to change the center of the field and for extra fun use the mouse wheel to control warp speed!!

Now pretend you *are* captain of the Enterprise (I know you're thinking about it).

Canvas K3D

Some examples of my Canvas 3D rendering library.

A simple and fast library to allow pseudo 3D graphics to be rendered onto a 2D canvas.

All 3D maths is hand cranked and rendering performed using the nifty Canvas APIs. Objects can be displayed as points, wireframe, solid polygons, textured polygons and shaded using plain colour, depthcued (z-order) or light-sourced - things can be rotated around and moved about to make cool demos (see below). A simple linear-additive lighting model (oh-err) with any number of coloured lights can be applied to objects, which is nice.

UltraLight - Demo

Interactive 3D demo. Another example of the Canvas K3D library in action. With mouse control so you can entertain yourself.

Shows off the real-time lighting features of the 3D library, lovely.

Snowfield - Demo

Demo entry for the Xmas 2010 JS1K competition.

The JavaScript code is only 1020 bytes in length!

The winning entry for the competition is annoyingly brilliant (yep no winning entry for me, bah humbug) and is well worth viewing.

L-Systems

Fractals and shrubbery.

An L-System, or Lindenmayer System is a simple but elegant 'turtle' rendering platform. Self-similarity and fractal-like forms make it easy to generate plant and other natural-looking organic forms that 'grow'.

Trippy Peppers - Demo

Image Manipulation.

Once of the first canvas experiments I tried, just playing around with sine wave effects on an image using a hidden canvas element to preprocess the image in one direction then another for each frame.

It's quite trippy, you remember that Simpson's episode right?

Asteroids - Benchmark

HTML5 Canvas browser benchmark tool.

Give your HTML5 browser a run for its money. Runs a number of punishing tests on the canvas 2D rendering features that are most used in HTML5 games, particularly image sprite rendering and alpha compositing.

The results depend heavily on the CPU and (for recent browsers) GPU power of your machine - so you cannot really compare between machines unless you run the same browser. So give it a try on as many browsers as possible!

NOTE! This benchmark is now replaced by CanvasMark 2013 which gives much better results on modern browsers.