A curated list of awesome Canvas examples, related articles and posts. Inspired by awesome-python.
Please take a quick gander at the contribution guidelines first.
"Added in HTML5, the HTML
Some good examples about creation with canvas.
- 30.000 particles [show me the code] • A result of a study creating performant particles with Canvas 2D.
- Canvas Colour Cycling [show me the code] • This demo is an implementation of a full 8-bit color cycling engine, rendered into an HTML5 Canvas in real-time.
- Canvas Loader [show me the code] • Reference to make loaders using canvas.
- Circular Rings [show me the code] • A great example about how to create circular rings using canvas.
- Cloth 3D Effect (Google Chrome strongly recommended) • Thid demo renders a 3d model of Apple iPod with sphere environmental mapping technique.
- Cloth Effect [show me the code] • A cloth 3D effect fork.
- Colorful Particles [show me the code] • Experiment show how to generates random particles. Very simple code for assimilate.
- Distance Field Waves [show me the code] • A example about GPU rendering shader experiments with procedural 3D scene generation using ray marching and distance field (also known as 'sphere tracing') rendering techniques.
- Draw Table - [show me the code] • A simple example about events using canvas.
- Fibrous Texture [show me the code] • Simple canvas based animation; draws random lines across the field. Makes an interesting papery pattern that becomes increasingly detailed with each iteration.
- Image Nodes [show me the code] • Interactive nodes built from image data. Use the mouse to play.
- Inception [show me the code] • Generates a scrawl of a city, a canvas HTML5 experiment. Based on Inception movie
- JS Metaballs [show me the code] • Experiment for Chrome. Mix of webkit-filter and canvas for a metaballs effect.
- Linjer • Amazing experiment about nodes effects in addition with cloth and animation effect.
- Liquid Particles • A good example about Liquid Particles.
- LucidChart • A complete tool to draw diagrams and other geometric forms, made in canvas.
- L-System Turtle Fractal Renderer • A example about fractal renderer using canvas.
- Motion Graphic Typeface [show me the code] • A example about typeface animation.
- Neatnait Canvas Rain [show me the code] • A reference to create rain particles.
- Particles [show me the code] • Reference to create astonishing particles.
- Particles.js [show me the code] • Beautiful particles created usign canvas.
- Ping Pong Game [show me the code] • Besides being a good example, it also is a tutorial about game made with canvas.
- Pirates Love Daisies • A entire game created using canvas
- Raining Day [show me the code] • Raindrops using canvas. It's Neatnait Canvas Rain fork.
- Space Noodles • Amazig example about line movement and animation.
- Star Time Lapse Effect [show me the code] • An example about creating a star time-lapse sky using canvas.
- Tree in the Breeze [show me the code] • Demo about generating 2D trees in canvas.
- Trigonoparty! [show me the code] • Simple trigonometry visualisation.
- Video Destruction • Block based destruction of HTML5 video, best viewed in webkit based browsers.
- Wipers [show me the code] • Wipers receiving life with canvas.
- 3D Lorenz Atractor [show me the code] • A simple canvas example showing a Lorenz atractor
- 3D Movement in HTML5 Canvas [show me the code] • Excelent example about vector postion and movement.
- 3D Space Craft • A Space Craft made and rotating with canvas.
- Wormz • Particles experiment.
To draw using canvas¶
- ChemDoodle is an open source chemistry and chem-informatics toolkit where canvas is being used to solve common chemistry related tasks, displaying the molecules in a variety of different ways.
- fabric.js provides interactive object model on top of canvas element and also has SVG-to-canvas (and canvas-to-SVG) parser
- Origami.js - JS Lib to redesign canvas API interface
- p5.js - p5.js is a JS client-side library for creating graphic and interactive experiences
- Pixi.js - Super fast HTML 5 2D rendering engine that uses webGL with canvas fallback
- Processingjs is a data visualization programming language.
- Visualize is a JQuery plugin who creates charts and graphs from tabular data using the HTML canvas element.
- zDog - Flat, round, designer-friendly pseudo-3D engine for canvas & SVG
For other purposes, but still use canvas¶
- React Canvas - High performance
Where to discover more about Canvas.
- Google I/O 2012 - GRITS: PvP Gaming with HTML, by Colton McAnlis
- Mobile HTML5 Graphics Performance, by Sam Abadir
- The Making of an HTML5 Platform Game, by David Geary
- High Performance Mobile Web Game Development in HTML5, by Sangmin Shim
- HTML5 Canvas by Steve Fulton, Jeff Fulton - O'Reilly. Updated: 2nd Edition
- HTML5 Canvas For Dummies by Don Cowan
- Foundation HTML5 Canvas: For Games and Entertainment by Rob Hawkes
- HTML5 Canvas Cookbook - by Eric Rowell
- HTML Canvas Deep Dive - by Josh Marinacci
- @jeresig - Creator of Processing.js
- @mrdoob - Creator of three.js
- @soulwire - Creator of sketch.js and actively creating and sharing canvas/WebGL experiments
- @spielzeugz - Actively creating and sharing canvas experiments
- @paul_irish - Active contributor and write a reference post about requestAnimationFrame
- @end3r - HTML5 game developer and EnclaveGames indie studio founder
Websites && Tutorials¶
- Mozilla Developer Network Canvas Tutorial - This tutorial describes how to use the
- HTML5 Canvas Tutorials
- 31 days of canvas
- Breakout - a fantastic tutorial for any canvas programming wannabes, where he runs through the steps needed to create a Breakout clone. The tutorial consists of 12 very clear and concise steps, where you can view a demo of how your project should look so far.
- Canvas Demos - A good font to study canvas. You can find application, games, tools and tutorials for the canvas HTML5 element.
- Procedural Drawing in Canvas - a tutorial that explains more about how procedural drawing works so that others can also learn the skill and start producing their own patterns.
- The canvas element in the HTML5 draft standard
- Internet Explorer 9 Guide for Developers: HTML5 canvas element
- Physics for Lazy Game Developers - Provides examples of velocity, acceleration, collisions, rotation and particle effects.
- Draw Particles using HTML5 Canvas - Shortcut tutorial shows how create simple and colorful particles.
- Khan Academy - Hour of Drawing with Code
The content of this project itself is licensed under the Creative Commons Attribution 3.0 license.