The canvas element is part of HTML5 and allows for dynamic, scriptable rendering of 2D shapes and bitmap images. It is a low level, procedural model that updates a bit map and does not have a built in scene graph.

Canvas consists of a drawable region defined in HTML code with height and width attributes. JavaScript code may access the area through a full set of drawing functions similar to other common 2D APIs, thus allowing for dynamically generated graphics. Some anticipated uses of the canvas include building graphs, animations, games, and image composition.

In this post I will showcasing games developed using HTML5 canvas element.

Sinuous

The goal is simple: avoid the red dots! Built using the HTML5 canvas element. Works on iOS & Android devices.

Super Mario Kart

A small but fun racing game built in html5 canvas and javascript.

Pacman

This is most of the Pacman game everyone knows and loves. It isnt a complete implementation yet and I do plan on working some more on it, however it should mostly be playable.

A torus style game

More or less like a traditional brick game built by HTML5 and JavaScipt.

Asteroids

If you love space shooting game, you must play this one. And it is unbelievably built with HTML5 and Javascript.

Bert’s Breakdown

A nicely done html5 canvas game, smooth animation and brilliant level design.

TWITCH

TWITCH is a series of minimal games within small windows. How fast can you solve them all? Each game only responds to clicking; mouse position and keyboard are ignored.

JS Wars

JS WARS is a classic shoot em up written to demonstrate the power of modern web browsers using html5 technology. It is targeting Firefox 3.5 and Chrome 3.0 with their new audio/video support and increased javascript performance. JS WARS should work well in other modern web browsers (supporting the canvas tag) too, just without the music and sound effects.

Chain Reaction

A very simple game yet extremely addictive. It is made using the HTML5 canvas element.

Same Game

An addictive game played by matching up the colors in order to collapse the balls stack.

Coverfire

Its more or less the same concept of the classic battle city.

JQuery Racing

Damn! this game makes this post takes time to publish. I lost all my time playing in this one. It is built using HTML5 canvas and new CSS3 feature such as transformations and it also uses jQuery as the core JS library.

Thrust

A classic 8-bit computer game in HTML5 and JavaScript

Tetris

A classic tetris game made by HTML5

3D Tetris – Cubeout

A 3D tetris game made by HTML5 canvas element and JavaSript

Galatic Plunder

This game, written in JavaScript using the HTML5 Canvas and Audio objects, was developed as a proof of concept that a shooter-style game can be coded without the use of any Flash.

Lines

Game goal is to arrange balls of the same colour in a straight lines (every direction). 5 or more balls on a straight line are removed and points are given. Longer lines give more points to you. Crossing lines count together.

RGB Invaders

A tribute to the awesome old game. Use arrows to control your spaceship and space to shoot. Destroy enemies in R-G-B order to get extra score points. Press S to activate sound effects (works in Safari only). Features seven enemy layouts, infinite levels and FPS-independent rendering engine.

Agent 008 Ball

A very well implemented Pool game develop using HTML5 canvas and JavaScript. Well designed and the game physics is good. Very fun to play and good in the eye.

JSLander

JSLander developed using Javascript and Canvas. Game mechanics: 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.

Rainbow Blocks

Rainbow Blocks is a colourful block-sliding puzzle arcade game, similar to SameGame or JT’s blocks. Rainbow Blocks 10K is a cut-down version of the iPhone/iPad game, which is available to play on the web.

Hope you enjoy all the games I have listed here. I will add some more later.

Buy domains here