10 Awesome HTML5 Canvas Examples

Canvas is a great feature in HTML5 that allows us to draw graphics on web browsers using JavaScript. For instance, it can be used to manipulate photos, draw and animate shapes, play videos or renders hardware-accelerated 3D graphics with WebGL support! Sky's the limit. But it has also been used to make really awesome digital arts by pros... In past few months I have encountered many great examples of HTMl5 canvas, and today I am going to list some of them here for you to enjoy. If you want to learn more about HTML5 canvas, look no further than these free tutorials - Let's call it Draw(ing Surface), Canvas, HTML5 Canvas, the Basics.

Rainbow Rain

Really impressive HTML5 canvas demo fills the box with colorful animating lines.

Image Particles

This a mindblowing canvas demo simulates the movements of particles from an image to create a constantly exploding particle effect that looks absolutely beautiful.

Beautiful Noise

Demo draws some moving noise circles to make a gorgeous circular art effect using HTML 5 canvas.

Abstract Canvas Visualization

What can I say? this demo is absolutely stunning to watch as the effect transforms into different shapes beautifully, while a complex math controls its each move.

Canvas particles

This demo is about gently moving particles, seems like not much? just think about background images of your websites being replaced with something this cool.

Constellation

Demo creates randomly moving stars on the canvas, and the connecting lines are formed on mouseover. Very nicely done demo.

Canvas Lightning WIP

How about nice lightning effect on canvas? Here's a demo that depicts real world lightning effect in action.

Rainbow octopus on canvas

Another neatly done canvas demo called Rainbow octopus, a colourful moving dots that form a circular octopus like shape.

Find your Mouse

An interesting canvas demo that tracks and points your mouse movement in realtime.

Mechanical Grass

It's really interesting to see how HTML5 canvas is slowly taking over Flash over the years. Last but not the least is this another great canvas demo, that draws random curly lines as you move the mouse pointer. It was converted from a Flash project.