Twitter Facebook RSS Logo

Awesome HTML5 Canvas Animations & Applications

12 Comments

Check out some awesome HTML5 animations, photo galleries, image effects, 3D rotations & effects, background animations, audio and video applications and more that are possible using the HTML5 canvas element.

Awesome HTML5 Canvas Animations & Applications

Overview

The canvas element is a new HTML feature and is part of HTML5 and allows for dynamic, scriptable rendering of 2D shapes and bitmap images. It is an easy and powerful way to draw graphics.

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 those of other common 2D APIs, thus allowing for dynamically generated graphics on the fly. Some anticipated uses of Canvas include building graphs, animations, games, and image composition.

Canvas was originally introduced by Apple for their Dashboard widgets, but it has now been adopted in HTML 5. Canvas has several methods for drawing paths, boxes, circles, characters, and adding images.

Canvas allows one to draw directly in the web browser without the use of plugins like Flash or Java. With a simple API, Canvas can effectively build animation in web applications for all devices, not just desktops.

HTML5 Canvas Experiments & Applications

Animations

PlasmaTree

PlasmaTree

Asteroid Belt

Asteroid Belt

HTML5 Love

HTML5 Love

origami

origami

Leaf Transform

Leaf Transform

FishIETank

FishIETank

ball_pool

ball_pool

parcycle

parcycle

Water Wave

Water Wave

Fireworks

Fireworks

sticky-thing

sticky-thing

Magnetic

Magnetic

water Ripple effect using HTML5 canvas

water Ripple effect using HTML5 canvas

xplsv-or_so_they_say

xplsv-or_so_they_say

Voxel Rain

Voxel Rain

Crazier Tentacles

Crazier Tentacles

FishBowl

FishBowl

waveform

waveform

Raindrops Particle System

Raindrops Particle System

Colorscube

Colorscube

HTML5 Canvas – “Electronic Business Card” experiment

HTML5 Canvas - "Electronic Business Card" experiment

Liquid Particles

Liquid Particles

Drawing/Sketching Applications

Sketchpad

Sketchpad

deviantART Muro

deviantART Muro

FlowerPower

FlowerPower

Many Lines

Many Lines

Animated Backgrounds

Html5 Canvas Star Space Background animation:Turn – dark blue

Html5 Canvas Star Space Background animation:Turn - dark blue

Animated Backgrounds

Animated Backgrounds

Audion & Video

Video Destruction

Video Destruction

Nightclub Music Visualisation

Nightclub Music Visualisation

360 MP3 Player

360 MP3 Player

BlobBuilder

BlobBuilder

3d Rotation

javascript-3d-model-viewer

javascript-3d-model-viewer

CanvasMol

CanvasMol

K3D Canvas 3D

K3D Canvas 3D

Cool 3D lighting effects – Normal Mapped Photos

Cool 3D lighting effects - Normal Mapped Photos

Google Images Gift Box – CSS 3D example

Google Images Gift Box - CSS 3D example

Photo Galleries & Image Effects

canvasphoto – polaroids

canvasphoto - polaroids

Momoflow

Momoflow

Canvas in 3D

Canvas in 3D

impressionist

impressionist

Tiler 3D image transition

Tiler 3D image transition

Coulisse

Coulisse

HTML5 Canvas App for Online Image Enhancements

HTML5 Canvas App for Online Image Enhancements

HTML5 canvas pixelate effect

HTML5 canvas pixelate effect

JSASCII

JSASCII

Iconza

Iconza

Premium Html5 Canvas

HTML5 Dock Menu Gallery

HTML5 Dock Menu Gallery

Interactive 3D CGGallery – HTML5

Interactive 3D CGGallery - HTML5

HTML5 Signature Pad to Image

HTML5 Signature Pad to Image

Animation Particles Text

Animation Particles Text

Pixel Map

Pixel Map

HTML5 Image Transitions Jquery Plugin

HTML5 Image Transitions Jquery Plugin

jQuery Shining Image

jQuery Shining Image

jQuery Blend Modes

jQuery Blend Modes

HTML5 Canvas Carousel

HTML5 Canvas Carousel

Neon Text Effects jQuery Plugin

Neon Text Effects jQuery Plugin

HTML5 Water Droplets Effect

HTML5 Water Droplets Effect

jQuery Html5 Buttons

jQuery Html5 Buttons

Shiner – HTML5 Canvas Glow Effects jQuery Plugin

Shiner - HTML5 Canvas Glow Effects jQuery Plugin

HTML5 Preload Animations

HTML5 Preload Animations

Gravity Gallery – HTML5 jQuery Plugin

Gravity Gallery - HTML5 jQuery Plugin

jQuery Gradient Creator

jQuery Gradient Creator

Hope you enjoyed this post and learnt something new & interesting! Tell us what you think!

12 thoughts on “Awesome HTML5 Canvas Animations & Applications

  1. Thanks for sharing a diverse collection of html 5 Canvas examples. I have seen quite a few websites recently making use of this new HTML 5 element something which I hope to get round learning when it becomes more mainstream. Many of the examples listed from http://www.canvasdemos.com/ a site which I will be bookmarking for future reference, feature powerful animation effects which could add another aspect of interactivity to a site when used effectively.

  2. Thanks for the well researched list, some great stuff!

    A site that seems pretty popular at the moment is http://www.loxiastudio.com/en

    It perhaps geared a little more for beginners than experiences webdesigners but you cant argue with.

    It’s an on-line tool that lets you choose from around 40 different animations then simply cope and paste a small line of code (simple iFrame from what I can tell) into your site.

    All done on-line and they even host the animation.

    certainly worth a look

  3. I seriously love your site.. Pleasant colors & theme. Did you build this site yourself?

    Please reply back as I’m hoping to create my own personal site and would love to know where you got this from or just what the theme is called. Cheers!

Leave a Reply

Your email address will not be published. Required fields are marked *

Featured Templates

Subscribe to New Posts

Enter your email address:

Delivered by FeedBurner