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
"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.