# Awesome Canvas

A curated list of awesome Canvas examples, related articles and posts. Inspired by awesome-python.

## Contributing

Please take a quick gander at the contribution guidelines first.

## Summary

- Canvas

  - Definition
  - Examples

- Libraries

- Resources

  - Talks
  - Books
  - Twitter
  - Websites and Tutorials

- License

## Canvas

### Definition

“Added in HTML5, the HTML <canvas> element can be used to draw graphics via scripting in JavaScript. For example, it can be used to draw graphs, make photo compositions, create animations or even do real-time video processing or rendering.” by Mozilla Developer Network

### Examples

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.
- Just Canvas [show me the code]• This is a JavaScript experiment to capture movements. Just Dance Idea + HTML5 Canvas Implementation.
- 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.
- Matrix Animation [show me the code] • A Matrix Rain animation 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 using 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
- PixelCraft • A pixel-art editor made using canvas
- Raining Day [show me the code] • Raindrops using canvas. It’s Neatnait Canvas Rain fork.
- Space Noodles • Amazing 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.
- tsParticles examples Collection of tsParticles particles animations samples
- 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.

## Libraries

### To draw using canvas

- Akihabara is HTML5 games library for making pixel based games using Javascript and the canvas tag.
- Chart.js is a lightweight JavaScript library for creating dynamic and visually appealing charts using the HTML5 Canvas element.
- 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.
- d3 (or D3.js) is a JavaScript library for visualizing data using web standards. D3 helps you bring data to life using SVG, Canvas and HTML.
- EaselJS is a JavaScript library that makes working with the HTML5 Canvas element easy. Useful for creating games, generative art, and other highly graphical experiences. EaselJS is part of CreateJS - a modular libraries and tools which work together or independently to enable rich interactive content on open web technologies via HTML5.
- fabric.js provides interactive object model on top of canvas element and also has SVG-to-canvas (and canvas-to-SVG) parser
- iio.js - A javascript library that speeds the creation and deployment of HTML5 Canvas applications
- isomerjs - An isometric graphics library for HTML5 canvas
- Javascript-Voronoi - A Javascript implementation of Fortune’s algorithm to compute Voronoi cells
- Konva - Konva.js is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.
- 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
- Paper.js - Scriptographer ported to JavaScript and the browser, using HTML5 Canvas.
- Pencil.js - Nice modular Javascript library with clear OOP syntaxe and lots of features.
- Pixi.js - Super fast HTML 5 2D rendering engine that uses webGL with canvas fallback
- Processingjs is a data visualization programming language.
  - Overview
  - 91 basic demos
- Proton is a lightweight and powerful javascript particle engine. With it you can easily create countless cool effects
- Pts.js - Pts is a javascript library for visualization and creative-coding.
- Rough.js - Rough.js is a graphics library that lets you draw in a sketchy, hand-drawn-like, style
- Scrawl-canvas - easily add multiple responsive, accessible and interactive <canvas> elements to a web page
- Sketch - Cross-Platform JavaScript Creative Coding Framework
- Three.js is a javascript library that makes WebGL - 3D in the browser, however you can render using canvas instead of WebGL
  - Introduction
  - Some amazing examples
- tsParticles is a lightweight library for creating easily particles animations. It includes ready to use components for the most used Javascript frameworks (ReactJS, VueJS, Angular, etc.)
- 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
- ZIM - ZIM is a general Canvas Framework with simple, powerful JavaScript that lets everyone, from beginners to professionals, code creativity.
- zrender - A lightweight canvas library which providing 2d draw for Apache ECharts (incubating)

### For other purposes, but still use canvas

- React Canvas - High performance

## Resources

Where to discover more about Canvas.

### Talks

- 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 Animation with Javascript, by Josh Robertson

### Books

- 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

### Twitter

- @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 and Tutorials

- Mozilla Developer Network Canvas Tutorial - This tutorial describes how to use the
- HTML5 Canvas Tutorials
- 31 days of canvas
- Dev.Opera: HTML5 Canvas — the Basics - This article takes you through the basics of implementing a 2D canvas context, and using the basic canvas functions, including lines, shape primitives, images, text, and more. You are assumed to have mastered JavaScript basics already.
- 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 by David Walsh - 9 Mind-Blowing Canvas Demos with their respective source code.
- 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
- Accelerated Game Programming with HTML5 and canvas - this tutorial describes the structure of a typical game class in JavaScript, drawing to the canvas, double buffering, map/tile representation and player movement.
- 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.
- Create a game chracter with HTML5 and JavaScript - Part 1
- Create a game chracter with HTML5 and JavaScript - Part 2
- Khan Academy - Hour of Drawing with Code
- Making a Lunar Lander in JavaScript - A 5 lesson tutorial that explain how to make a Lunar Lander game in JavaScript.
- W3Schools Canvas Tutorial - Tutorial covering various features and methods and with many practical examples

## License

The content of this project itself is licensed under the Creative Commons Attribution 3.0 license.