Learning HTML5 Canvas through jsFiddle Examples

Let’s learn more about Canvas through some examples posted on jsFiddle. Below you will find a ton of hand picked links to some awesome demos and examples of how you can use Canvas:

Cool Canvas Image Effects

• Canvas image reflect
• Canvas image cutup border
• Canvas drag and capture image
• Canvas Animated Beams
• Canvas moving tiles
• Canvas auto drawing movement
• Canvas Image Drag and Drop (broken image effects)
• Canvas Cool Image Generation
• Canvas Image Drag and Drop with Image Transitions
• Canvas Scrath it Image Ticket
• Canvas Flip Image by 90 degrees
• Canvas Loading Image jquery plugin
• Canvas Droid Image
• Canvas Image Cutup
• Canvas Image Flip
• Canvas Draw image on Background Image

Canvas Clock Examples

• Canvas Clock version 1
• Canvas Clock version 2
• Canvas Clock version 3
• Canvas Clock version 4
• Canvas Clock version 5 with Processing.js
• Canvas Clock version 6
• Canvas Clock version 7
• Canvas Clock version 8
• Canvas Clock version 9
• Canvas Clock version 10
• Canvas Clock version 11
• Canvas Clock version 12
• Canvas Clock version 13
• Canvas Clock version 14
• Canvas Clock v15

Cool Canvas Visual Effects

• Canvas color changing tiles
• Cool Canvas Fireworks
• Random Nighttime City Buildings
• Canvas Floating Tiles
• Canvas light show
• Canvas Bouncing Colorful Balls
• Cool Canvas Gradiant Effect
• Canvas Fireworks v1
• Canvas Fireworks v2
• Canvas Random Noise
• Video in Canvas with Effects

Cool Canvas Mouse Movements and Interactions

• Canvas ball follows mouse
• Canvas mouse cursor
• Cool Canvas Visualization with mouse interaction
• Canvas click to get water drops v1
• Canvas click to get water drops v2
• Canvas mouse cursor cross hairs
• Canvas Mouse Cursor Circles
• Canvas sparkles following mouse
• Canvas ball following mouse
• Cool Canvas Grid Example
• Canvas red circle follows mouse
• Canvas Mouse Cursor Effects
• Simple Canvas Mouse Movement

Drawing with Your Mouse via Canvas

• Canvas mouse drawing with colors
• Canvas Grid Click and Paint
• Simple Canvas mouse drawing
• Canvas Grid Tiles and Color Changing
• Canvas Grid Tiles Drawing
• Click and Drag to draw a box with Canvas
• Canvas mouse movement drawing

Misc HTML5 Canvas Examples

• Face Detection on image using Canvas
• Bouncing balls on Canvas Element
• Simple Canvas to Image Example
• Canvas World Map v1
• Awesome Canvas Map – using LeafLet
• Canvas Escaped Balls Game
• Simple Canvas Blocks Falling Game
• Typing Blood Simple Canvas Game
• Canvas Overlapping Circles
• Canvas 3D Circle Animation
• Canvas Magnifiying Glass
• Canvas Circle Drawing via Range input
• HTML5 mini audio player with Canvas
• Canvas Flot Example
• Canvas Lava Lamp
• Canvas Counter
• Canvas Physics
• Canvas Text Effects
• Canvas Text Effects Gradient

Hope you enjoyed these examples, if you are interested in Canvas you might want to check out this great Canvas tutorial and oCanvas object-oriented drawing library.