Get Started With WebGL: Draw a Square

Bartek Drozdz has written a tutorial in .net magazine for any aspiring WebGL developers which shows you how to… wait for it… draw a square!

Why so simple? Bartek explains..

The first encounter with WebGL can be intimidating. The API has nothing of the friendly object-oriented libraries you might have used. WebGL is based on OpenGL, which is a rather old type C-style library. It features a long list of functions used to set different states and pass data to the GPU.

Shapes and shaders

The tutorial explains how the WebGL context works; how to create shaders; how the co-ordinates system works and how to set the drawing mode.

No Comply

In No Comply, Mozillian Paul Rouget invites us to animate the soul of your songs using WebGL and AudioAPI technology. No comply puts us in a urban world with 2D retro characters from 8 bit fighting games of the past fighting in a 3D arena.

Retro, yet 3D

Retro in 3D

Comments from the Author:

In addition to cutting edge graphics with WebGL and canvas, we also wanted to explore how far we could push the new Firefox 4 Audio API we’d developed. The Audio Data API allows us to do many new things with the HTML5 audio and video tags, such as outputting generated audio and revealing realtime audio data to JavaScript.

Check it out!

JavaScript 2D Particle System

Jarrad Overson has created this awesome JavaScript 2D particle system. In Jarrad’s demo, you can drag the particle emitters and fields to create complex designs and patterns.

Candle particles

Comments from the Author:

Control particles in a realtime gravity sandbox. Add attracting or repelling forces to make beautiful orbits or use your mouse to add chaos to your environment.

Click on an emitter to change settings and drag it to move it. Add new fields and emitters with the buttons on the righthand menu; and control other visuals from the menu buttons.

Performs best in the latest Chrome and Firefox.

Mutant Zombie Monsters

Bill Scott has created this zombie shooting platform game using the ImpactJS engine.


Comments from the Author:

Mutant Zombie Monsters is a retro platform zombie shooter made entirely with JavaScript that is displayed on an HTML5 canvas. This game works on mobile browsers as well, adjusting a few things if the user is on a mobile device.

Use the arrow keys to move, C to shoot and X to throw a scythe. Good luck!


Unwaivering by Ippa, is a short story about true love – and is one of the first canvas based games which uses a game as art.

Climb the mountain

Use the right cursor to fight the wind up the mountain. Unwaivering uses the JawsJS canvas


PaJama by Dominique Janssen is a simulation of breeding fish, based on the fundamental laws of the genetics (by Lois de Mendel). The game uses the canvas element to manage the fish animations.

Making fishies

Breeding fishies

PaJama contains many options to customise your fish, and you can also modify their environment. The game contains a variety of different manuals and help documents so you can get the most out of your fish.

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!