• Definition

  • Examples

  • Talks

  • Books

  • Twitter

  • Websites and Tutorials

"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

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.

• Akihabara is HTML5 games library for making pixel based games using Javascript and the canvas tag.
• CanvasKit is Skia's Canvas API compiled to WebAssembly, providing high-performance 2D graphics rendering for web applications.
• 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
• 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
• 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
• textmode.js is a lightweight, framework-agnostic creative coding library for real-time ASCII and textmode graphics in the browser.
• 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.

Where to discover more about Canvas.

• 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

• @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