├── LICENSE.md ├── CONTRIBUTING.md └── README.md /LICENSE.md: -------------------------------------------------------------------------------- 1 | Copyright (c) 2015 Hugo Raphael Vianna Amorim 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 4 | 5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 6 | 7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contribution Guidelines 2 | 3 | **To add to the list:** Submit a pull request 4 | 5 | **To remove from the list:** Open an issue 6 | 7 | 8 | #### Adding in the list (PR Guideline) 9 | 10 | - List items should be sorted *alphabetically*. 11 | - Each item should be limited to one link 12 | - The link should be the name of the package or project 13 | - Descriptions should be clear, concise, and non-promotional 14 | - Descriptions should follow the link, on the same line 15 | 16 | Please contribute links to examples/books you have used or are familiar with. This will help ensure high-quality entries. 17 | 18 | 19 | ## Quality standard 20 | 21 | To stay on the list, package repositories should adhere to these quality standards: 22 | 23 | - Generally useful to the community 24 | - Functional 25 | - Actively maintained (even if that just means acknowledging open issues when they arise) 26 | - Stable, or progressing toward stable 27 | - Documented 28 | 29 | 30 | ## Reporting issues 31 | 32 | Please open an issue if you find anything that could be improved or have 33 | suggestions for making the list a more valuable resource. We realize sometimes 34 | experiments/projects fall into abandonment or have breaking builds for extended periods of time, so if you see that, please let us know. We also realize that sometimes projects are just going through transitions or are more experimental in nature. These can still be cool, but we can indicate them as transitory or experimental -- again, just open an issue. Thanks everyone! 35 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Awesome Canvas 2 | 3 | [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome) 4 | 5 | A curated list of awesome Canvas examples, related articles and posts. Inspired by [awesome-python](https://github.com/vinta/awesome-python). 6 | 7 | ## Contributing 8 | 9 | Please take a quick gander at the [contribution guidelines](https://github.com/raphamorim/awesome-canvas/blob/master/CONTRIBUTING.md) first. 10 | 11 | ## Summary 12 | 13 | - [Canvas](#canvas) 14 | - [Definition](#definition) 15 | - [Examples](#examples) 16 | 17 | - [Libraries](#libraries) 18 | 19 | - [Resources](#resources) 20 | - [Talks](#talks) 21 | - [Books](#books) 22 | - [Twitter](#twitter) 23 | - [Websites](#websites) 24 | - [Tutorials](#tutorials) 25 | 26 | - [License](#license) 27 | 28 | ## Canvas 29 | 30 | ### Definition 31 | 32 | "Added in HTML5, the HTML 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](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API) 33 | 34 | ### Examples 35 | 36 | *Some good examples about creation with canvas.* 37 | 38 | 39 | * [30.000 particles](http://codepen.io/soulwire/full/Ffvlo) [[show me the code](http://codepen.io/soulwire/pen/Ffvlo)] • A result of a study creating performant particles with Canvas 2D. 40 | * [Canvas Colour Cycling](http://www.effectgames.com/demos/canvascycle/) [[show me the code](http://www.effectgames.com/effect/article.psp.html/joe/Old_School_Color_Cycling_with_HTML5)] • This demo is an implementation of a full 8-bit color cycling engine, rendered into an HTML5 Canvas in real-time. 41 | * [Canvas Loader](http://cssdeck.com/labs/full/4do6cnjm) [[show me the code](http://cssdeck.com/labs/4do6cnjm)] • Reference to make loaders using canvas. 42 | * [Circular Rings](http://cssdeck.com/labs/full/zeaklousedit) [[show me the code](http://cssdeck.com/labs/zeaklousedit)] • A great example about how to create circular rings using canvas. 43 | * [Cloth 3D Effect](http://gyu.que.jp/jscloth/) (Google Chrome strongly recommended) • Thid demo renders a 3d model of Apple iPod with sphere environmental mapping technique. 44 | * [Cloth Effect](http://raphamorim.io/canvas-experiments/cloth) [[show me the code](https://github.com/raphamorim/canvas-experiments)] • A cloth 3D effect fork. 45 | * [Colorful Particles](http://raphamorim.io/canvas-experiments/particles) [[show me the code](https://github.com/raphamorim/canvas-experiments)] • Experiment show how to generates random particles. Very simple code for assimilate. 46 | * [Distance Field Waves](http://www.kevs3d.co.uk/dev/shaders/distancefield3.html) [[show me the code](https://github.com/kevinroast/webglshaders/blob/master/distancefield3.html)] • 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. 47 | * [Draw Table](http://raphamorim.io/canvas-experiments/draw) - [[show me the code](https://github.com/raphamorim/canvas-experiments)] • A simple example about events using canvas. 48 | * [Fibrous Texture](http://cssdeck.com/labs/full/fibrous) [[show me the code](http://cssdeck.com/labs/fibrous)] • Simple canvas based animation; draws random lines across the field. Makes an interesting papery pattern that becomes increasingly detailed with each iteration. 49 | * [Image Nodes](http://cssdeck.com/labs/full/image-nodes) [[show me the code](http://cssdeck.com/labs/image-nodes)] • Interactive nodes built from image data. Use the mouse to play. 50 | * [Inception](http://raphamorim.io/canvas-experiments/inception) [[show me the code](https://github.com/raphamorim/canvas-experiments)] • Generates a scrawl of a city, a canvas HTML5 experiment. Based on Inception movie 51 | * [JS Metaballs](http://cssdeck.com/labs/full/js-metaballs) [[show me the code](http://cssdeck.com/labs/js-metaballs)] • Experiment for Chrome. Mix of webkit-filter and canvas for a metaballs effect. 52 | * [Just Canvas](http://raphamorim.io/just-canvas/) [[show me the code](https://github.com/raphamorim/just-canvas)]• This is a JavaScript experiment to capture movements. Just Dance Idea + HTML5 Canvas Implementation. 53 | * [Linjer](http://lab.hakim.se/linjer/) • Amazing experiment about nodes effects in addition with cloth and animation effect. 54 | * [Liquid Particles](http://spielzeugz.de/html5/liquid-particles.html) • A good example about Liquid Particles. 55 | * [LucidChart](http://www.lucidchart.com/documents/demo) • A complete tool to draw diagrams and other geometric forms, made in canvas. 56 | * [L-System Turtle Fractal Renderer](http://www.kevs3d.co.uk/dev/lsystems/) • A example about fractal renderer using canvas. 57 | * [Motion Graphic Typeface](http://codepen.io/ara_node/full/nuJCG/) [[show me the code](http://codepen.io/ara_node/pen/nuJCG)] • A example about typeface animation. 58 | * [Neatnait Canvas Rain](http://cssdeck.com/labs/full/neatnait-canvas-rain) [[show me the code](http://cssdeck.com/labs/neatnait-canvas-rain)] • A reference to create rain particles. 59 | * [Particles](http://codepen.io/pixelgrid/full/ECrKd) [[show me the code](http://codepen.io/pixelgrid/pen/ECrKd)] • Reference to create astonishing particles. 60 | * [Particles.js](http://codepen.io/VincentGarreau/full/pnlso/) [[show me the code](http://codepen.io/VincentGarreau/pen/pnlso)] • Beautiful particles created usign canvas. 61 | * [Ping Pong Game](http://cssdeck.com/labs/full/ping-pong-game-tutorial-with-html5-canvas-and-sounds) [[show me the code](http://cssdeck.com/labs/ping-pong-game-tutorial-with-html5-canvas-and-sounds)] • Besides being a good example, it also is a tutorial about game made with canvas. 62 | * [Pirates Love Daisies](http://www.pirateslovedaisies.com/) • A entire game created using canvas 63 | * [Raining Day](http://raphamorim.io/raining-day/) [[show me the code](https://github.com/raphamorim/canvas-experiments)] • Raindrops using canvas. It's Neatnait Canvas Rain fork. 64 | * [Space Noodles](http://www.spielzeugz.de/html5/space-noodles/) • Amazig example about line movement and animation. 65 | * [Tree in the Breeze](http://cssdeck.com/labs/full/fjqj6ifd) [[show me the code](http://cssdeck.com/labs/fjqj6ifd)] • Demo about generating 2D trees in canvas. 66 | * [Video Destruction](http://www.craftymind.com/factory/html5video/CanvasVideo.html) • Block based destruction of HTML5 video, best viewed in webkit based browsers. 67 | * [Wipers](http://cssdeck.com/labs/full/oluh99m6) [[show me the code](http://cssdeck.com/labs/oluh99m6)] • Wipers receiving life with canvas. 68 | * [3D Lorenz Atractor](http://cssdeck.com/labs/full/3d-lorenz-atractor) [[show me the code](http://cssdeck.com/labs/3d-lorenz-atractor)] • A simple canvas example showing a Lorenz atractor 69 | * [3D Movement in HTML5 Canvas](http://cssdeck.com/labs/full/xtunjekt) [[show me the code](http://cssdeck.com/labs/xtunjekt)] • Excelent example about vector postion and movement. 70 | * [3D Space Craft](http://07055944295.com/solvalou.php) • A Space Craft made and rotating with canvas. 71 | * [Wormz](https://www.chromeexperiments.com/experiment/wormz) • Particles experiment. 72 | 73 | 74 | ## Libraries 75 | 76 | ### To draw using canvas 77 | 78 | - [Akihabara](http://www.kesiev.com/akihabara/) is HTML5 games library for making pixel based games using Javascript and the canvas tag. 79 | - [ChemDoodle](http://web.chemdoodle.com/) 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. 80 | - [fabric.js](http://fabricjs.com) provides interactive object model on top of canvas element 81 | and also has SVG-to-canvas (and canvas-to-SVG) parser 82 | - [iio.js](https://github.com/iioinc/iio.js) - A javascript library that speeds the creation and deployment of HTML5 Canvas applications 83 | - [Origami.js](https://github.com/raphamorim/origami.js) - JS Lib to redesign canvas API interface 84 | - [Paper.js](https://github.com/paperjs/paper.js) - Scriptographer ported to JavaScript and the browser, using HTML5 Canvas. 85 | - [Pixi.js](http://www.pixijs.com) - Super fast HTML 5 2D rendering engine that uses webGL with canvas fallback 86 | - [Processingjs](http://ejohn.org/blog/processingjs/) is a data visualization programming language. 87 | - [Overview](http://ejohn.org/blog/overview-of-processing/) 88 | - [91 basic demos](http://ejohn.org/apps/processing.js/examples/basic/) 89 | - [Sketch](https://github.com/soulwire/sketch.js) - Cross-Platform JavaScript Creative Coding Framework 90 | - [Three.js](http://threejs.org/) is a javascript library that makes WebGL - 3D in the browser, however you can [render using canvas instead of WebGL](http://threejs.org/docs/#Reference/Renderers/CanvasRenderer) 91 | - [Introduction](http://threejs.org/docs/#Manual/Introduction/Creating_a_scene) 92 | - [Some amazing examples](http://threejs.org/examples/) 93 | - [Visualize](https://github.com/filamentgroup/jQuery-Visualize) is a JQuery plugin who creates charts and graphs from tabular data using the HTML canvas element. 94 | 95 | 96 | ### For other purposes, but still use canvas 97 | - [React Canvas](https://github.com/Flipboard/react-canvas) - High performance rendering for React components. 98 | 99 | 100 | ## Resources 101 | 102 | Where to discover more about Canvas. 103 | 104 | ### Talks 105 | 106 | - [Google I/O 2012 - GRITS: PvP Gaming with HTML, by Colton McAnlis](https://www.youtube.com/watch?v=Prkyd5n0P7k) 107 | - [Mobile HTML5 Graphics Performance, by Sam Abadir](https://www.youtube.com/watch?v=_fBRJgH_c1s) 108 | - [The Making of an HTML5 Platform Game, by David Geary](https://www.youtube.com/watch?v=S256vAqGY6c) 109 | - [High Performance Mobile Web Game Development in HTML5, by Sangmin Shim](https://www.youtube.com/watch?v=T8OCEqM7mqU) 110 | - [HTML5 Canvas Animation with Javascript, by Josh Robertson](https://www.youtube.com/watch?v=sLt9WeyGVEQ) 111 | 112 | 113 | ### Books 114 | 115 | - [HTML5 Canvas](http://shop.oreilly.com/product/0636920013327.do) by Steve Fulton, Jeff Fulton - O'Reilly. Updated: [2nd Edition](http://shop.oreilly.com/product/0636920026266.do) 116 | - [HTML5 Canvas For Dummies](http://www.amazon.com/HTML5-Canvas-For-Dummies-Cowan/dp/1118385357) by Don Cowan 117 | - [Foundation HTML5 Canvas: For Games and Entertainment](http://www.amazon.com/gp/product/1430232919/ref=as_li_qf_sp_asin_il_tl?ie=UTF8&tag=rawkes-20&linkCode=as2&camp=1789&creative=9325&creativeASIN=1430232919) by Rob Hawkes 118 | - [HTML5 Canvas Cookbook](https://www.packtpub.com/web-development/html5-canvas-cookbook) - by Eric Rowell 119 | - [HTML Canvas Deep Dive](http://joshondesign.com/p/books/canvasdeepdive/title.html) - by Josh Marinacci 120 | 121 | ### Twitter 122 | 123 | * [@jeresig](https://twitter.com/jeresig) - Creator of [Processing.js](https://github.com/jeresig/processing-js) 124 | * [@mrdoob](https://twitter.com/mrdoob) - Creator of [three.js](https://github.com/mrdoob/three.js) 125 | * [@soulwire](https://twitter.com/soulwire) - Creator of [sketch.js](https://github.com/soulwire/sketch.js) and actively creating and sharing canvas/WebGL experiments 126 | * [@spielzeugz](https://twitter.com/spielzeugz) - Actively creating and sharing canvas experiments 127 | * [@paul_irish](https://twitter.com/paul_irish) - Active contributor and write a [reference post about requestAnimationFrame](http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/) 128 | * [@end3r](https://twitter.com/end3r) - HTML5 game developer and EnclaveGames indie studio founder 129 | 130 | ### Websites && Tutorials 131 | 132 | - [Mozilla Developer Network Canvas Tutorial](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/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. 133 | - [HTML5 Canvas Tutorials](http://www.html5canvastutorials.com/) 134 | - [31 days of canvas](http://creativejs.com/2011/08/31-days-of-canvas-tutorials/) 135 | - [Dev.Opera: HTML5 Canvas — the Basics](https://dev.opera.com/articles/html5-canvas-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. 136 | - [Breakout](http://billmill.org/static/canvastutorial/) - 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. 137 | - [Canvas Demos](http://www.canvasdemos.com/) - A good font to study canvas. You can find application, games, tools and tutorials for the canvas HTML5 element. 138 | - [Procedural Drawing in Canvas](http://acko.net/blog/js1k-demo-the-making-of/) - a tutorial that explains more about how procedural drawing works so that others can also learn the skill and start producing their own patterns. 139 | - [The canvas element in the HTML5 draft standard](https://html.spec.whatwg.org/multipage/scripting.html#the-canvas-element) 140 | - [Internet Explorer 9 Guide for Developers: HTML5 canvas element](https://msdn.microsoft.com/en-us/ie/hh410106#_HTML5_canvas) 141 | - [Accelerated Game Programming with HTML5 and canvas](http://www.felinesoft.com/blog/index.php/2010/09/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. 142 | - [Physics for Lazy Game Developers](http://labs.skookum.com/demos/barcampclt_physics/) - Provides examples of velocity, acceleration, collisions, rotation and particle effects. 143 | - [Draw Particles using HTML5 Canvas](https://medium.com/@raphamorim/draw-particles-using-html5-canvas-6151ab214f7a) - Shortcut tutorial shows how create simple and colorful particles. 144 | - [Create a game chracter with HTML5 and JavaScript - Part 1](http://www.williammalone.com/articles/create-html5-canvas-javascript-game-character/1/) 145 | - [Create a game chracter with HTML5 and JavaScript - Part 2](http://www.williammalone.com/articles/create-html5-canvas-javascript-game-character/2/) 146 | - [Khan Academy - Hour of Drawing with Code](https://www.khanacademy.org/computing/hour-of-code/hour-of-code-tutorial/v/welcome-hour-of-code) 147 | 148 | ## License 149 | 150 | The content of this project itself is licensed under the [Creative Commons Attribution 3.0 license](http://creativecommons.org/licenses/by/3.0/us/deed.en_US). 151 | --------------------------------------------------------------------------------