{"slug": "raphamorim--awesome-canvas", "title": "Canvas", "description": "A curated list of awesome HTML5 Canvas with examples, related articles and posts.", "github_url": "https://github.com/raphamorim/awesome-canvas", "stars": "1.4K", "tag": "Front-End Development", "entry_count": 103, "subcategory_count": 9, "subcategories": [{"name": "Summary", "parent": "", "entries": [{"name": "Canvas", "url": "#canvas", "description": ""}, {"name": "Libraries", "url": "#libraries", "description": ""}, {"name": "Resources", "url": "#resources", "description": ""}, {"name": "License", "url": "#license", "description": ""}]}, {"name": "Definition", "parent": "Canvas", "entries": []}, {"name": "Examples", "parent": "Canvas", "entries": [{"name": "30.000 particles", "url": "http://codepen.io/soulwire/full/Ffvlo", "description": ""}, {"name": "Canvas Colour Cycling", "url": "http://www.effectgames.com/demos/canvascycle/", "description": ""}, {"name": "Canvas Loader", "url": "http://cssdeck.com/labs/full/4do6cnjm", "description": ""}, {"name": "Circular Rings", "url": "http://cssdeck.com/labs/full/zeaklousedit", "description": ""}, {"name": "Cloth 3D Effect", "url": "http://gyu.que.jp/jscloth/", "description": ""}, {"name": "Cloth Effect", "url": "http://raphamorim.io/canvas-experiments/cloth", "description": ""}, {"name": "Colorful Particles", "url": "http://raphamorim.io/canvas-experiments/particles", "description": ""}, {"name": "Distance Field Waves", "url": "http://www.kevs3d.co.uk/dev/shaders/distancefield3.html", "description": ""}, {"name": "Draw Table", "url": "http://raphamorim.io/canvas-experiments/draw", "description": "\\[[show me the code (\u2b5046)](https://github.com/raphamorim/canvas-experiments)] \u2022 A simple example about events using canvas."}, {"name": "Fibrous Texture", "url": "http://cssdeck.com/labs/full/fibrous", "description": ""}, {"name": "Image Nodes", "url": "http://cssdeck.com/labs/full/image-nodes", "description": ""}, {"name": "Inception", "url": "http://raphamorim.io/canvas-experiments/inception", "description": ""}, {"name": "JS Metaballs", "url": "http://cssdeck.com/labs/full/js-metaballs", "description": ""}, {"name": "Just Canvas", "url": "http://raphamorim.io/just-canvas/", "description": ""}, {"name": "Linjer", "url": "http://lab.hakim.se/linjer/", "description": ""}, {"name": "Liquid Particles", "url": "http://spielzeugz.de/html5/liquid-particles.html", "description": ""}, {"name": "LucidChart", "url": "http://www.lucidchart.com/documents/demo", "description": ""}, {"name": "L-System Turtle Fractal Renderer", "url": "http://www.kevs3d.co.uk/dev/lsystems/", "description": ""}, {"name": "Matrix Animation", "url": "https://matrix.dotglitch.dev/", "description": ""}, {"name": "Motion Graphic Typeface", "url": "http://codepen.io/ara_node/full/nuJCG/", "description": ""}, {"name": "Neatnait Canvas Rain", "url": "http://cssdeck.com/labs/full/neatnait-canvas-rain", "description": ""}, {"name": "Particles", "url": "http://codepen.io/pixelgrid/full/ECrKd", "description": ""}, {"name": "Particles.js", "url": "http://codepen.io/VincentGarreau/full/pnlso/", "description": ""}, {"name": "Ping Pong Game", "url": "http://cssdeck.com/labs/full/ping-pong-game-tutorial-with-html5-canvas-and-sounds", "description": ""}, {"name": "Pirates Love Daisies", "url": "http://www.pirateslovedaisies.com/", "description": ""}, {"name": "PixelCraft", "url": "https://github.com/rgab1508/PixelCraft", "description": "", "stars": "1.2k"}, {"name": "Raining Day", "url": "http://raphamorim.io/raining-day/", "description": ""}, {"name": "Space Noodles", "url": "http://www.spielzeugz.de/html5/space-noodles/", "description": ""}, {"name": "Star Time Lapse Effect", "url": "https://fralonra.github.io/star-time-lapse/demo/", "description": ""}, {"name": "Tree in the Breeze", "url": "http://cssdeck.com/labs/full/fjqj6ifd", "description": ""}, {"name": "Trigonoparty!", "url": "https://ramesaliyev.com/trigonoparty", "description": ""}, {"name": "tsParticles examples", "url": "https://codepen.io/tv/DPOage", "description": ""}, {"name": "Video Destruction", "url": "http://www.craftymind.com/factory/html5video/CanvasVideo.html", "description": ""}, {"name": "Wipers", "url": "http://cssdeck.com/labs/full/oluh99m6", "description": ""}, {"name": "3D Lorenz Atractor", "url": "http://cssdeck.com/labs/full/3d-lorenz-atractor", "description": ""}, {"name": "3D Movement in HTML5 Canvas", "url": "http://cssdeck.com/labs/full/xtunjekt", "description": ""}, {"name": "3D Space Craft", "url": "http://07055944295.com/solvalou.php", "description": ""}, {"name": "Wormz", "url": "https://www.chromeexperiments.com/experiment/wormz", "description": ""}]}, {"name": "To draw using canvas", "parent": "Libraries", "entries": [{"name": "Akihabara", "url": "http://www.kesiev.com/akihabara/", "description": ""}, {"name": "Chart.js", "url": "https://github.com/chartjs/Chart.js", "description": "", "stars": "63k"}, {"name": "ChemDoodle", "url": "http://web.chemdoodle.com/", "description": ""}, {"name": "d3", "url": "https://github.com/d3/d3", "description": "", "stars": "107k"}, {"name": "EaselJS", "url": "https://createjs.com/easeljs", "description": ""}, {"name": "fabric.js", "url": "http://fabricjs.com", "description": ""}, {"name": "iio.js", "url": "https://github.com/iioinc/iio.js", "description": "A javascript library that speeds the creation and deployment of HTML5 Canvas applications", "stars": "457"}, {"name": "isomerjs", "url": "http://jdan.github.io/isomer/", "description": "An isometric graphics library for HTML5 canvas"}, {"name": "Javascript-Voronoi", "url": "https://github.com/gorhill/Javascript-Voronoi", "description": "A Javascript implementation of Fortune's algorithm to compute Voronoi cells", "stars": "987"}, {"name": "Konva", "url": "https://github.com/konvajs/konva", "description": "Konva.js is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.", "stars": "10k"}, {"name": "Origami.js", "url": "https://github.com/raphamorim/origami.js", "description": "JS Lib to redesign canvas API interface", "stars": "767"}, {"name": "p5.js", "url": "https://p5js.org", "description": "p5.js is a JS client-side library for creating graphic and interactive experiences"}, {"name": "Paper.js", "url": "https://github.com/paperjs/paper.js", "description": "Scriptographer ported to JavaScript and the browser, using HTML5 Canvas.", "stars": "14k"}, {"name": "Pencil.js", "url": "https://pencil.js.org/", "description": "Nice modular Javascript library with clear OOP syntaxe and lots of features."}, {"name": "Pixi.js", "url": "http://www.pixijs.com", "description": "Super fast HTML 5 2D rendering engine that uses webGL with canvas fallback"}, {"name": "Processingjs", "url": "http://ejohn.org/blog/processingjs/", "description": ""}, {"name": "Proton", "url": "https://github.com/a-jie/Proton", "description": "", "stars": "2.3k"}, {"name": "Pts.js", "url": "https://ptsjs.org", "description": "Pts is a javascript library for visualization and creative-coding."}, {"name": "Rough.js", "url": "https://roughjs.com/", "description": "Rough.js is a graphics library that lets you draw in a sketchy, hand-drawn-like, style"}, {"name": "Scrawl-canvas", "url": "https://scrawl-v8.rikweb.org.uk/", "description": "easily add multiple responsive, accessible and interactive \\<canvas> elements to a web page"}, {"name": "Sketch", "url": "https://github.com/soulwire/sketch.js", "description": "Cross-Platform JavaScript Creative Coding Framework", "stars": "4.1k"}, {"name": "Three.js", "url": "http://threejs.org/", "description": ""}, {"name": "tsParticles", "url": "https://particles.matteobruni.it/", "description": ""}, {"name": "Visualize", "url": "https://github.com/filamentgroup/jQuery-Visualize", "description": "", "stars": "354"}, {"name": "zDog", "url": "https://github.com/metafizzy/zdog", "description": "Flat, round, designer-friendly pseudo-3D engine for canvas & SVG", "stars": "10k"}, {"name": "ZIM", "url": "https://zimjs.com/", "description": "ZIM is a general Canvas Framework with simple, powerful JavaScript that lets everyone, from beginners to professionals, code creativity."}, {"name": "zrender", "url": "https://github.com/ecomfe/zrender", "description": "A lightweight canvas library which providing 2d draw for Apache ECharts (incubating)", "stars": "5.9k"}]}, {"name": "For other purposes, but still use canvas", "parent": "Libraries", "entries": [{"name": "React Canvas", "url": "https://github.com/Flipboard/react-canvas", "description": "High performance <canvas> rendering for React components.", "stars": "13k"}]}, {"name": "Talks", "parent": "Resources", "entries": [{"name": "Google I/O 2012 - GRITS: PvP Gaming with HTML, by Colton McAnlis", "url": "https://www.youtube.com/watch?v=Prkyd5n0P7k", "description": ""}, {"name": "Mobile HTML5 Graphics Performance, by Sam Abadir", "url": "https://www.youtube.com/watch?v=_fBRJgH_c1s", "description": ""}, {"name": "The Making of an HTML5 Platform Game, by David Geary", "url": "https://www.youtube.com/watch?v=S256vAqGY6c", "description": ""}, {"name": "High Performance Mobile Web Game Development in HTML5, by Sangmin Shim", "url": "https://www.youtube.com/watch?v=T8OCEqM7mqU", "description": ""}, {"name": "HTML5 Canvas Animation with Javascript, by Josh Robertson", "url": "https://www.youtube.com/watch?v=sLt9WeyGVEQ", "description": ""}]}, {"name": "Books", "parent": "Resources", "entries": [{"name": "HTML5 Canvas", "url": "http://shop.oreilly.com/product/0636920013327.do", "description": ""}, {"name": "HTML5 Canvas For Dummies", "url": "http://www.amazon.com/HTML5-Canvas-For-Dummies-Cowan/dp/1118385357", "description": ""}, {"name": "Foundation HTML5 Canvas: For Games and Entertainment", "url": "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", "description": ""}, {"name": "HTML5 Canvas Cookbook", "url": "https://www.packtpub.com/web-development/html5-canvas-cookbook", "description": "by Eric Rowell"}, {"name": "HTML Canvas Deep Dive", "url": "http://joshondesign.com/p/books/canvasdeepdive/title.html", "description": "by Josh Marinacci"}]}, {"name": "Twitter", "parent": "Resources", "entries": [{"name": "@jeresig", "url": "https://twitter.com/jeresig", "description": "Creator of [Processing.js (\u2b501.7k)](https://github.com/jeresig/processing-js)"}, {"name": "@mrdoob", "url": "https://twitter.com/mrdoob", "description": "Creator of [three.js (\u2b5097k)](https://github.com/mrdoob/three.js)"}, {"name": "@soulwire", "url": "https://twitter.com/soulwire", "description": "Creator of [sketch.js (\u2b504.1k)](https://github.com/soulwire/sketch.js) and actively creating and sharing canvas/WebGL experiments"}, {"name": "@spielzeugz", "url": "https://twitter.com/spielzeugz", "description": "Actively creating and sharing canvas experiments"}, {"name": "@paul\\_irish", "url": "https://twitter.com/paul_irish", "description": "Active contributor and write a [reference post about requestAnimationFrame](http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/)"}, {"name": "@end3r", "url": "https://twitter.com/end3r", "description": "HTML5 game developer and EnclaveGames indie studio founder"}]}, {"name": "Websites and Tutorials", "parent": "Resources", "entries": [{"name": "Mozilla Developer Network Canvas Tutorial", "url": "https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial", "description": "This tutorial describes how to use the <canvas> 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."}, {"name": "HTML5 Canvas Tutorials", "url": "http://www.html5canvastutorials.com/", "description": ""}, {"name": "31 days of canvas", "url": "http://creativejs.com/2011/08/31-days-of-canvas-tutorials/", "description": ""}, {"name": "Dev.Opera: HTML5 Canvas \u2014 the Basics", "url": "https://dev.opera.com/articles/html5-canvas-basics/", "description": "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."}, {"name": "Breakout", "url": "http://billmill.org/static/canvastutorial/", "description": "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."}, {"name": "Canvas Demos by David Walsh", "url": "https://davidwalsh.name/canvas-demos", "description": "9 Mind-Blowing Canvas Demos with their respective source code."}, {"name": "Procedural Drawing in Canvas", "url": "http://acko.net/blog/js1k-demo-the-making-of/", "description": "a tutorial that explains more about how procedural drawing works so that others can also learn the skill and start producing their own patterns."}, {"name": "The canvas element in the HTML5 draft standard", "url": "https://html.spec.whatwg.org/multipage/scripting.html#the-canvas-element", "description": ""}, {"name": "Internet Explorer 9 Guide for Developers: HTML5 canvas element", "url": "https://msdn.microsoft.com/en-us/ie/hh410106#_HTML5_canvas", "description": ""}, {"name": "Accelerated Game Programming with HTML5 and canvas", "url": "http://www.felinesoft.com/blog/index.php/2010/09/accelerated-game-programming-with-html5-and-canvas/", "description": "this tutorial describes the structure of a typical game class in JavaScript, drawing to the canvas, double buffering, map/tile representation and player movement."}, {"name": "Physics for Lazy Game Developers", "url": "http://labs.skookum.com/demos/barcampclt_physics/", "description": "Provides examples of velocity, acceleration, collisions, rotation and particle effects."}, {"name": "Draw Particles using HTML5 Canvas", "url": "https://medium.com/@raphamorim/draw-particles-using-html5-canvas-6151ab214f7a", "description": "Shortcut tutorial shows how create simple and colorful particles."}, {"name": "Create a game chracter with HTML5 and JavaScript - Part 1", "url": "http://www.williammalone.com/articles/create-html5-canvas-javascript-game-character/1/", "description": ""}, {"name": "Create a game chracter with HTML5 and JavaScript - Part 2", "url": "http://www.williammalone.com/articles/create-html5-canvas-javascript-game-character/2/", "description": ""}, {"name": "Khan Academy - Hour of Drawing with Code", "url": "https://www.khanacademy.org/computing/hour-of-code/hour-of-code-tutorial/v/welcome-hour-of-code", "description": ""}, {"name": "Making a Lunar Lander in JavaScript", "url": "http://students.cs.ucl.ac.uk/schoolslab/projects/HT5", "description": "A 5 lesson tutorial that explain how to make a Lunar Lander game in JavaScript."}, {"name": "W3Schools Canvas Tutorial", "url": "https://www.w3schools.com/graphics/canvas_intro.asp", "description": "Tutorial covering various features and methods and with many practical examples"}]}], "name": ""}