Canvas

Definition

• Mozilla Developer Network

Examples

• Canvas Colour Cycling - bit color cycling engine, rendered into an HTML5 Canvas in real-time.
• LucidChart
• Star Time Lapse Effect - time-lapse)] • An example about creating a star time-lapse sky using canvas.
• tsParticles examples
• Matrix Animation - animation)] • A Matrix Rain animation using canvas.
• 30.000 particles
• Motion Graphic Typeface
• Particles
• Particles.js
• PixelCraft - art editor made using canvas
• Cloth 3D Effect
• Distance Field Waves
• L-System Turtle Fractal Renderer
• Space Noodles
• Canvas Loader
• Circular Rings
• Fibrous Texture
• Image Nodes - nodes)] • Interactive nodes built from image data. Use the mouse to play.
• JS Metaballs - metaballs)] • Experiment for Chrome. Mix of webkit-filter and canvas for a metaballs effect.
• Neatnait Canvas Rain - canvas-rain)] • A reference to create rain particles.
• Ping Pong Game - pong-game-tutorial-with-html5-canvas-and-sounds)] • Besides being a good example, it also is a tutorial about game made with canvas.
• Tree in the Breeze
• Wipers
• 3D Lorenz Atractor - lorenz-atractor)] • A simple canvas example showing a Lorenz atractor
• 3D Movement in HTML5 Canvas

Libraries

For other purposes, but still use canvas

• React Canvas - High performance rendering for React components.

To draw using canvas

• EaselJS - a modular libraries and tools which work together or independently to enable rich interactive content on open web technologies via HTML5.
• Pencil.js - Nice modular Javascript library with clear OOP syntaxe and lots of features.
• 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
• tsParticles
• ZIM - ZIM is a general Canvas Framework with simple, powerful JavaScript that lets everyone, from beginners to professionals, code creativity.
• Chart.js
• d3
• 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
• Paper.js - Scriptographer ported to JavaScript and the browser, using HTML5 Canvas.
• Proton
• Sketch - Cross-Platform JavaScript Creative Coding Framework
• Visualize
• zDog - Flat, round, designer-friendly pseudo-3D engine for canvas & SVG
• zrender - A lightweight canvas library which providing 2d draw for Apache ECharts (incubating)
• isomerjs - An isometric graphics library for HTML5 canvas
• CanvasKit - performance 2D graphics rendering for web applications.
• textmode.js - agnostic creative coding library for real-time ASCII and textmode graphics in the browser.
• Pts.js - Pts is a javascript library for visualization and creative-coding.
• p5.js - p5.js is a JS client-side library for creating graphic and interactive experiences

Resources

Books

• HTML Canvas Deep Dive - by Josh Marinacci
• HTML5 Canvas - O'Reilly. Updated: 2nd Edition
• HTML5 Canvas For Dummies
• Foundation HTML5 Canvas: For Games and Entertainment
• HTML5 Canvas Cookbook - by Eric Rowell

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

Websites and Tutorials

• Mozilla Developer Network Canvas Tutorial - This tutorial describes how to use the element to draw 2D graphics, starting with the basics. The examples provided should give you some clear ideas what you can do with canvas and will provide code snippets that may get you started in building your own content.
• HTML5 Canvas Tutorials
• Canvas Demos by David Walsh - 9 Mind-Blowing Canvas Demos with their respective source code.
• The canvas element in the HTML5 draft standard
• Draw Particles using HTML5 Canvas - Shortcut tutorial shows how create simple and colorful particles.
• W3Schools Canvas Tutorial - Tutorial covering various features and methods and with many practical examples
• Khan Academy - Hour of Drawing with Code
• 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.
• Create a game chracter with HTML5 and JavaScript - Part 1
• Create a game chracter with HTML5 and JavaScript - Part 2
• Making a Lunar Lander in JavaScript - A 5 lesson tutorial that explain how to make a Lunar Lander game in JavaScript.
• 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.