Advertisement

While most of us have heard of HTML5, not many of us are actually aware of what it does. However, lately one of its featured known as HTML5 Canvas is slowly picking up popularity and demand in the market. HTML5 Canvas is said to be an element that is used to draw graphics while scripting, and normally that means through JavaScript. To put it simply the HTML5 Canvas is akin to the Flash program only one would use JavaScript to draw their graphics and their graphics is then defined in codes.

While going through articles introducing the HTML5 Canvas we have came across some amazing examples and implementation of the HTML5 Canvas; in fact some of the designers made such good use to this feature that we have decided to collect and compiled some of these amazing examples and share them with our readers.

A clear definition to HTML5 Canvas was offered on the Internet, the Dev.Opera defined HTML5 canvas as something that “gives you an easy and powerful way to draw graphics using JavaScript. For each canvas element you can use a ‘context’ (think about a page in a drawing pad), into which you can issue JavaScript commands to draw anything you want.” A tutorial explains that in order create a Canvas, one must first created the canvas element with specified ID, width and height of the element; and since one cannot draw with the canvas element all drawings must then be done in JavaScript, the script will then use the ID earlier to find the element.

Among the number of examples one might realize that HTML5 Canvas is heavily adopted in games; we have then selected some of the inspiring ones into our collection. The reason to this technology was adopted into games is because the graphics that were drawn in JavaScript were defined in codes; and codes could be easily compressed. Hence, the bandwidth usage could be reduced allowing the graphics to load faster and putting less strain on your web browser and allowing the games to proceed in a much smoother transition and load faster on different web browsers.

We hope our short post here is able to help you understand and answer some of the questions you have on HTML5 Canvas and we also hope that you enjoy our compilations of some of useful examples and implementations of HTML5 Canvas.

Fish Bowl

Enjoy watching the fishes swimming in the fish bowl.
Fish Bowl

3D Earth

Watch as the earth spins around its axis.
3D Earth

Interactive Polaroids

Enjoy the photo gallery view in this interactive polaroid format.
Interactive Polaroids

Canvas Cycle: True 8-bit Color Cycling With HTML5

The greatest demo one can have with HTML5 that even showcases different weather effects.
Canvas Cycle: True 8-bit Color Cycling With HTML5

Magician – Fairy Rescue

Have fun with this game and try to rescue magical fairies that are trapped in gleaming bubbles.
Magician - Fairy Rescue

Pirates Love Daisies

A tower defence game and one gets to play Davy Jones who try to steal their opponent’s daisies.
Pirates Love Daisies

PaJama

A fish breeding simulation game based on the fundamental laws of genetics.
PaJama

Breakdom

A remix of the classic Breakout game.
Breakdom

Canvas Rider

An addictive game where you ride a bike on the tracks drawn by other players.
Canvas Rider

Trail

It’s all about particle patterns that generate smooth trails.
Trail

Wave

A canvas that experiments with smooth waves and bubbles initiated by the mouse.
Wave

Cloth Experiments

A simulation game w=using cloth.
Cloth Experiments

Ball Pool

Drag a ball, click on the background, shake your browser to play!
Ball Pool

Blowing Up HTML5

Click around the video frame to blow up part of the video.
Blowing Up HTML5

3D Landscape

A 3D landscape generated using the canvas element.
3D Landscape

Coulisse

A canvas slideshow that employs a cover flow effect.
Coulisse

Origami

A great canvas demo that features colourful folding actions.
Origami

WebGl Maze

The objective of this game is to get through the maze.
WebGl Maze

Tiler 3D

Features wonderful way to perform image transitions.
Tiler 3D

Particle System

Move the particle and chose options over the controls provided below.
Particle System

Molecule Rotation

For those who are interested in science and molecular visualisation.
Molecule Rotation

HTML5 Kaleidoscope Experiment

A showcase of wonderful Kaleidoscope effects.
HTML5 Kaleidoscope Experiment

Mesmerizer

Reacts to mouse gestures and keyboard inputs.
Mesmerizer

Flower Power

Learn to draw with blooming flower effects.
Flower Power

9Elements Particle Play

A great example that demonstrates audio and canvas in action.
9Elements Particle Play