414 lines
21 KiB
HTML
414 lines
21 KiB
HTML
<h1 id="awesome-canvas">Awesome Canvas</h1>
|
||
<p><a href="https://github.com/sindresorhus/awesome"><img
|
||
src="https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg"
|
||
alt="Awesome" /></a></p>
|
||
<p>A curated list of awesome Canvas examples, related articles and
|
||
posts. Inspired by <a
|
||
href="https://github.com/vinta/awesome-python">awesome-python</a>.</p>
|
||
<h2 id="contributing">Contributing</h2>
|
||
<p>Please take a quick gander at the <a
|
||
href="https://github.com/raphamorim/awesome-canvas/blob/master/CONTRIBUTING.md">contribution
|
||
guidelines</a> first.</p>
|
||
<h2 id="summary">Summary</h2>
|
||
<ul>
|
||
<li><p><a href="#canvas">Canvas</a></p>
|
||
<ul>
|
||
<li><a href="#definition">Definition</a></li>
|
||
<li><a href="#examples">Examples</a></li>
|
||
</ul></li>
|
||
<li><p><a href="#libraries">Libraries</a></p></li>
|
||
<li><p><a href="#resources">Resources</a></p>
|
||
<ul>
|
||
<li><a href="#talks">Talks</a></li>
|
||
<li><a href="#books">Books</a></li>
|
||
<li><a href="#twitter">Twitter</a></li>
|
||
<li><a href="#websites-and-tutorials">Websites and Tutorials</a></li>
|
||
</ul></li>
|
||
<li><p><a href="#license">License</a></p></li>
|
||
</ul>
|
||
<h2 id="canvas">Canvas</h2>
|
||
<h3 id="definition">Definition</h3>
|
||
<p>“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 <a
|
||
href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API">Mozilla
|
||
Developer Network</a></p>
|
||
<h3 id="examples">Examples</h3>
|
||
<p><em>Some good examples about creation with canvas.</em></p>
|
||
<ul>
|
||
<li><a href="http://codepen.io/soulwire/full/Ffvlo">30.000 particles</a>
|
||
[<a href="http://codepen.io/soulwire/pen/Ffvlo">show me the code</a>] •
|
||
A result of a study creating performant particles with Canvas 2D.</li>
|
||
<li><a href="http://www.effectgames.com/demos/canvascycle/">Canvas
|
||
Colour Cycling</a> [<a
|
||
href="http://www.effectgames.com/effect/article.psp.html/joe/Old_School_Color_Cycling_with_HTML5">show
|
||
me the code</a>] • This demo is an implementation of a full 8-bit color
|
||
cycling engine, rendered into an HTML5 Canvas in real-time.</li>
|
||
<li><a href="http://cssdeck.com/labs/full/4do6cnjm">Canvas Loader</a>
|
||
[<a href="http://cssdeck.com/labs/4do6cnjm">show me the code</a>] •
|
||
Reference to make loaders using canvas.</li>
|
||
<li><a href="http://cssdeck.com/labs/full/zeaklousedit">Circular
|
||
Rings</a> [<a href="http://cssdeck.com/labs/zeaklousedit">show me the
|
||
code</a>] • A great example about how to create circular rings using
|
||
canvas.</li>
|
||
<li><a href="http://gyu.que.jp/jscloth/">Cloth 3D Effect</a> (Google
|
||
Chrome strongly recommended) • Thid demo renders a 3d model of Apple
|
||
iPod with sphere environmental mapping technique.</li>
|
||
<li><a href="http://raphamorim.io/canvas-experiments/cloth">Cloth
|
||
Effect</a> [<a
|
||
href="https://github.com/raphamorim/canvas-experiments">show me the
|
||
code</a>] • A cloth 3D effect fork.</li>
|
||
<li><a href="http://raphamorim.io/canvas-experiments/particles">Colorful
|
||
Particles</a> [<a
|
||
href="https://github.com/raphamorim/canvas-experiments">show me the
|
||
code</a>] • Experiment show how to generates random particles. Very
|
||
simple code for assimilate.</li>
|
||
<li><a
|
||
href="http://www.kevs3d.co.uk/dev/shaders/distancefield3.html">Distance
|
||
Field Waves</a> [<a
|
||
href="https://github.com/kevinroast/webglshaders/blob/master/distancefield3.html">show
|
||
me the code</a>] • 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.</li>
|
||
<li><a href="http://raphamorim.io/canvas-experiments/draw">Draw
|
||
Table</a> - [<a
|
||
href="https://github.com/raphamorim/canvas-experiments">show me the
|
||
code</a>] • A simple example about events using canvas.</li>
|
||
<li><a href="http://cssdeck.com/labs/full/fibrous">Fibrous Texture</a>
|
||
[<a href="http://cssdeck.com/labs/fibrous">show me the code</a>] •
|
||
Simple canvas based animation; draws random lines across the field.
|
||
Makes an interesting papery pattern that becomes increasingly detailed
|
||
with each iteration.</li>
|
||
<li><a href="http://cssdeck.com/labs/full/image-nodes">Image Nodes</a>
|
||
[<a href="http://cssdeck.com/labs/image-nodes">show me the code</a>] •
|
||
Interactive nodes built from image data. Use the mouse to play.</li>
|
||
<li><a
|
||
href="http://raphamorim.io/canvas-experiments/inception">Inception</a>
|
||
[<a href="https://github.com/raphamorim/canvas-experiments">show me the
|
||
code</a>] • Generates a scrawl of a city, a canvas HTML5 experiment.
|
||
Based on Inception movie</li>
|
||
<li><a href="http://cssdeck.com/labs/full/js-metaballs">JS Metaballs</a>
|
||
[<a href="http://cssdeck.com/labs/js-metaballs">show me the code</a>] •
|
||
Experiment for Chrome. Mix of webkit-filter and canvas for a metaballs
|
||
effect.</li>
|
||
<li><a href="http://raphamorim.io/just-canvas/">Just Canvas</a> [<a
|
||
href="https://github.com/raphamorim/just-canvas">show me the code</a>]•
|
||
This is a JavaScript experiment to capture movements. Just Dance Idea +
|
||
HTML5 Canvas Implementation.</li>
|
||
<li><a href="http://lab.hakim.se/linjer/">Linjer</a> • Amazing
|
||
experiment about nodes effects in addition with cloth and animation
|
||
effect.</li>
|
||
<li><a href="http://spielzeugz.de/html5/liquid-particles.html">Liquid
|
||
Particles</a> • A good example about Liquid Particles.</li>
|
||
<li><a href="http://www.lucidchart.com/documents/demo">LucidChart</a> •
|
||
A complete tool to draw diagrams and other geometric forms, made in
|
||
canvas.</li>
|
||
<li><a href="http://www.kevs3d.co.uk/dev/lsystems/">L-System Turtle
|
||
Fractal Renderer</a> • A example about fractal renderer using
|
||
canvas.</li>
|
||
<li><a href="https://matrix.dotglitch.dev/">Matrix Animation</a> [<a
|
||
href="https://github.com/knackstedt/matrix-animation">show me the
|
||
code</a>] • A Matrix Rain animation using canvas.</li>
|
||
<li><a href="http://codepen.io/ara_node/full/nuJCG/">Motion Graphic
|
||
Typeface</a> [<a href="http://codepen.io/ara_node/pen/nuJCG">show me the
|
||
code</a>] • A example about typeface animation.</li>
|
||
<li><a href="http://cssdeck.com/labs/full/neatnait-canvas-rain">Neatnait
|
||
Canvas Rain</a> [<a
|
||
href="http://cssdeck.com/labs/neatnait-canvas-rain">show me the
|
||
code</a>] • A reference to create rain particles.</li>
|
||
<li><a href="http://codepen.io/pixelgrid/full/ECrKd">Particles</a> [<a
|
||
href="http://codepen.io/pixelgrid/pen/ECrKd">show me the code</a>] •
|
||
Reference to create astonishing particles.</li>
|
||
<li><a
|
||
href="http://codepen.io/VincentGarreau/full/pnlso/">Particles.js</a> [<a
|
||
href="http://codepen.io/VincentGarreau/pen/pnlso">show me the code</a>]
|
||
• Beautiful particles created using canvas.</li>
|
||
<li><a
|
||
href="http://cssdeck.com/labs/full/ping-pong-game-tutorial-with-html5-canvas-and-sounds">Ping
|
||
Pong Game</a> [<a
|
||
href="http://cssdeck.com/labs/ping-pong-game-tutorial-with-html5-canvas-and-sounds">show
|
||
me the code</a>] • Besides being a good example, it also is a tutorial
|
||
about game made with canvas.</li>
|
||
<li><a href="http://www.pirateslovedaisies.com/">Pirates Love
|
||
Daisies</a> • A entire game created using canvas</li>
|
||
<li><a href="https://github.com/rgab1508/PixelCraft">PixelCraft</a> • A
|
||
pixel-art editor made using canvas</li>
|
||
<li><a href="http://raphamorim.io/raining-day/">Raining Day</a> [<a
|
||
href="https://github.com/raphamorim/canvas-experiments">show me the
|
||
code</a>] • Raindrops using canvas. It’s Neatnait Canvas Rain fork.</li>
|
||
<li><a href="http://www.spielzeugz.de/html5/space-noodles/">Space
|
||
Noodles</a> • Amazing example about line movement and animation.</li>
|
||
<li><a href="https://fralonra.github.io/star-time-lapse/demo/">Star Time
|
||
Lapse Effect</a> [<a
|
||
href="https://github.com/fralonra/star-time-lapse">show me the code</a>]
|
||
• An example about creating a star time-lapse sky using canvas.</li>
|
||
<li><a href="http://cssdeck.com/labs/full/fjqj6ifd">Tree in the
|
||
Breeze</a> [<a href="http://cssdeck.com/labs/fjqj6ifd">show me the
|
||
code</a>] • Demo about generating 2D trees in canvas.</li>
|
||
<li><a href="https://ramesaliyev.com/trigonoparty">Trigonoparty!</a> [<a
|
||
href="https://github.com/ramesaliyev/trigonoparty">show me the code</a>]
|
||
• Simple trigonometry visualisation.</li>
|
||
<li><a href="https://codepen.io/tv/DPOage">tsParticles examples</a>
|
||
Collection of <a
|
||
href="https://github.com/matteobruni/tsparticles">tsParticles</a>
|
||
particles animations samples</li>
|
||
<li><a
|
||
href="http://www.craftymind.com/factory/html5video/CanvasVideo.html">Video
|
||
Destruction</a> • Block based destruction of HTML5 video, best viewed in
|
||
webkit based browsers.</li>
|
||
<li><a href="http://cssdeck.com/labs/full/oluh99m6">Wipers</a> [<a
|
||
href="http://cssdeck.com/labs/oluh99m6">show me the code</a>] • Wipers
|
||
receiving life with canvas.</li>
|
||
<li><a href="http://cssdeck.com/labs/full/3d-lorenz-atractor">3D Lorenz
|
||
Atractor</a> [<a href="http://cssdeck.com/labs/3d-lorenz-atractor">show
|
||
me the code</a>] • A simple canvas example showing a Lorenz
|
||
atractor</li>
|
||
<li><a href="http://cssdeck.com/labs/full/xtunjekt">3D Movement in HTML5
|
||
Canvas</a> [<a href="http://cssdeck.com/labs/xtunjekt">show me the
|
||
code</a>] • Excelent example about vector postion and movement.</li>
|
||
<li><a href="http://07055944295.com/solvalou.php">3D Space Craft</a> • A
|
||
Space Craft made and rotating with canvas.</li>
|
||
<li><a
|
||
href="https://www.chromeexperiments.com/experiment/wormz">Wormz</a> •
|
||
Particles experiment.</li>
|
||
</ul>
|
||
<h2 id="libraries">Libraries</h2>
|
||
<h3 id="to-draw-using-canvas">To draw using canvas</h3>
|
||
<ul>
|
||
<li><a href="http://www.kesiev.com/akihabara/">Akihabara</a> is HTML5
|
||
games library for making pixel based games using Javascript and the
|
||
canvas tag.</li>
|
||
<li><a href="https://github.com/chartjs/Chart.js">Chart.js</a> is a
|
||
lightweight JavaScript library for creating dynamic and visually
|
||
appealing charts using the HTML5 Canvas element.</li>
|
||
<li><a href="http://web.chemdoodle.com/">ChemDoodle</a> 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.</li>
|
||
<li><a href="https://github.com/d3/d3">d3</a> (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.</li>
|
||
<li><a href="https://createjs.com/easeljs">EaselJS</a> 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.</li>
|
||
<li><a href="http://fabricjs.com">fabric.js</a> provides interactive
|
||
object model on top of canvas element and also has SVG-to-canvas (and
|
||
canvas-to-SVG) parser</li>
|
||
<li><a href="https://github.com/iioinc/iio.js">iio.js</a> - A javascript
|
||
library that speeds the creation and deployment of HTML5 Canvas
|
||
applications</li>
|
||
<li><a href="http://jdan.github.io/isomer/">isomerjs</a> - An isometric
|
||
graphics library for HTML5 canvas</li>
|
||
<li><a
|
||
href="https://github.com/gorhill/Javascript-Voronoi">Javascript-Voronoi</a>
|
||
- A Javascript implementation of Fortune’s algorithm to compute Voronoi
|
||
cells</li>
|
||
<li><a href="https://github.com/konvajs/konva">Konva</a> - Konva.js is
|
||
an HTML5 Canvas JavaScript framework that extends the 2d context by
|
||
enabling canvas interactivity for desktop and mobile applications.</li>
|
||
<li><a href="https://github.com/raphamorim/origami.js">Origami.js</a> -
|
||
JS Lib to redesign canvas API interface</li>
|
||
<li><a href="https://p5js.org">p5.js</a> - p5.js is a JS client-side
|
||
library for creating graphic and interactive experiences</li>
|
||
<li><a href="https://github.com/paperjs/paper.js">Paper.js</a> -
|
||
Scriptographer ported to JavaScript and the browser, using HTML5
|
||
Canvas.</li>
|
||
<li><a href="https://pencil.js.org/">Pencil.js</a> - Nice modular
|
||
Javascript library with clear OOP syntaxe and lots of features.</li>
|
||
<li><a href="http://www.pixijs.com">Pixi.js</a> - Super fast HTML 5 2D
|
||
rendering engine that uses webGL with canvas fallback</li>
|
||
<li><a href="http://ejohn.org/blog/processingjs/">Processingjs</a> is a
|
||
data visualization programming language.
|
||
<ul>
|
||
<li><a
|
||
href="http://ejohn.org/blog/overview-of-processing/">Overview</a></li>
|
||
<li><a href="http://ejohn.org/apps/processing.js/examples/basic/">91
|
||
basic demos</a></li>
|
||
</ul></li>
|
||
<li><a href="https://github.com/a-jie/Proton">Proton</a> is a
|
||
lightweight and powerful javascript particle engine. With it you can
|
||
easily create countless cool effects</li>
|
||
<li><a href="https://ptsjs.org">Pts.js</a> - Pts is a javascript library
|
||
for visualization and creative-coding.</li>
|
||
<li><a href="https://roughjs.com/">Rough.js</a> - Rough.js is a graphics
|
||
library that lets you draw in a sketchy, hand-drawn-like, style</li>
|
||
<li><a href="https://scrawl-v8.rikweb.org.uk/">Scrawl-canvas</a> -
|
||
easily add multiple responsive, accessible and interactive
|
||
<canvas> elements to a web page</li>
|
||
<li><a href="https://github.com/soulwire/sketch.js">Sketch</a> -
|
||
Cross-Platform JavaScript Creative Coding Framework</li>
|
||
<li><a href="http://threejs.org/">Three.js</a> is a javascript library
|
||
that makes WebGL - 3D in the browser, however you can <a
|
||
href="http://threejs.org/docs/#Reference/Renderers/CanvasRenderer">render
|
||
using canvas instead of WebGL</a>
|
||
<ul>
|
||
<li><a
|
||
href="http://threejs.org/docs/#Manual/Introduction/Creating_a_scene">Introduction</a></li>
|
||
<li><a href="http://threejs.org/examples/">Some amazing
|
||
examples</a></li>
|
||
</ul></li>
|
||
<li><a href="https://particles.matteobruni.it/">tsParticles</a> 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.)</li>
|
||
<li><a
|
||
href="https://github.com/filamentgroup/jQuery-Visualize">Visualize</a>
|
||
is a JQuery plugin who creates charts and graphs from tabular data using
|
||
the HTML canvas element.</li>
|
||
<li><a href="https://github.com/metafizzy/zdog">zDog</a> - Flat, round,
|
||
designer-friendly pseudo-3D engine for canvas & SVG</li>
|
||
<li><a href="https://zimjs.com/">ZIM</a> - ZIM is a general Canvas
|
||
Framework with simple, powerful JavaScript that lets everyone, from
|
||
beginners to professionals, code creativity.</li>
|
||
<li><a href="https://github.com/ecomfe/zrender">zrender</a> - A
|
||
lightweight canvas library which providing 2d draw for Apache ECharts
|
||
(incubating)</li>
|
||
</ul>
|
||
<h3 id="for-other-purposes-but-still-use-canvas">For other purposes, but
|
||
still use canvas</h3>
|
||
<ul>
|
||
<li><a href="https://github.com/Flipboard/react-canvas">React Canvas</a>
|
||
- High performance
|
||
<canvas>
|
||
rendering for React components.</li>
|
||
</ul>
|
||
<h2 id="resources">Resources</h2>
|
||
<p>Where to discover more about Canvas.</p>
|
||
<h3 id="talks">Talks</h3>
|
||
<ul>
|
||
<li><a href="https://www.youtube.com/watch?v=Prkyd5n0P7k">Google I/O
|
||
2012 - GRITS: PvP Gaming with HTML, by Colton McAnlis</a></li>
|
||
<li><a href="https://www.youtube.com/watch?v=_fBRJgH_c1s">Mobile HTML5
|
||
Graphics Performance, by Sam Abadir</a></li>
|
||
<li><a href="https://www.youtube.com/watch?v=S256vAqGY6c">The Making of
|
||
an HTML5 Platform Game, by David Geary</a></li>
|
||
<li><a href="https://www.youtube.com/watch?v=T8OCEqM7mqU">High
|
||
Performance Mobile Web Game Development in HTML5, by Sangmin
|
||
Shim</a></li>
|
||
<li><a href="https://www.youtube.com/watch?v=sLt9WeyGVEQ">HTML5 Canvas
|
||
Animation with Javascript, by Josh Robertson</a></li>
|
||
</ul>
|
||
<h3 id="books">Books</h3>
|
||
<ul>
|
||
<li><a href="http://shop.oreilly.com/product/0636920013327.do">HTML5
|
||
Canvas</a> by Steve Fulton, Jeff Fulton - O’Reilly. Updated: <a
|
||
href="http://shop.oreilly.com/product/0636920026266.do">2nd
|
||
Edition</a></li>
|
||
<li><a
|
||
href="http://www.amazon.com/HTML5-Canvas-For-Dummies-Cowan/dp/1118385357">HTML5
|
||
Canvas For Dummies</a> by Don Cowan</li>
|
||
<li><a
|
||
href="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">Foundation
|
||
HTML5 Canvas: For Games and Entertainment</a> by Rob Hawkes</li>
|
||
<li><a
|
||
href="https://www.packtpub.com/web-development/html5-canvas-cookbook">HTML5
|
||
Canvas Cookbook</a> - by Eric Rowell</li>
|
||
<li><a
|
||
href="http://joshondesign.com/p/books/canvasdeepdive/title.html">HTML
|
||
Canvas Deep Dive</a> - by Josh Marinacci</li>
|
||
</ul>
|
||
<h3 id="twitter">Twitter</h3>
|
||
<ul>
|
||
<li><a href="https://twitter.com/jeresig"><span class="citation"
|
||
data-cites="jeresig">@jeresig</span></a> - Creator of <a
|
||
href="https://github.com/jeresig/processing-js">Processing.js</a></li>
|
||
<li><a href="https://twitter.com/mrdoob"><span class="citation"
|
||
data-cites="mrdoob">@mrdoob</span></a> - Creator of <a
|
||
href="https://github.com/mrdoob/three.js">three.js</a></li>
|
||
<li><a href="https://twitter.com/soulwire"><span class="citation"
|
||
data-cites="soulwire">@soulwire</span></a> - Creator of <a
|
||
href="https://github.com/soulwire/sketch.js">sketch.js</a> and actively
|
||
creating and sharing canvas/WebGL experiments</li>
|
||
<li><a href="https://twitter.com/spielzeugz"><span class="citation"
|
||
data-cites="spielzeugz">@spielzeugz</span></a> - Actively creating and
|
||
sharing canvas experiments</li>
|
||
<li><a href="https://twitter.com/paul_irish"><span class="citation"
|
||
data-cites="paul_irish">@paul_irish</span></a> - Active contributor and
|
||
write a <a
|
||
href="http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/">reference
|
||
post about requestAnimationFrame</a></li>
|
||
<li><a href="https://twitter.com/end3r"><span class="citation"
|
||
data-cites="end3r">@end3r</span></a> - HTML5 game developer and
|
||
EnclaveGames indie studio founder</li>
|
||
</ul>
|
||
<h3 id="websites-and-tutorials">Websites and Tutorials</h3>
|
||
<ul>
|
||
<li><a
|
||
href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial">Mozilla
|
||
Developer Network Canvas Tutorial</a> - 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.</li>
|
||
<li><a href="http://www.html5canvastutorials.com/">HTML5 Canvas
|
||
Tutorials</a></li>
|
||
<li><a
|
||
href="http://creativejs.com/2011/08/31-days-of-canvas-tutorials/">31
|
||
days of canvas</a></li>
|
||
<li><a
|
||
href="https://dev.opera.com/articles/html5-canvas-basics/">Dev.Opera:
|
||
HTML5 Canvas — the Basics</a> - 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.</li>
|
||
<li><a href="http://billmill.org/static/canvastutorial/">Breakout</a> -
|
||
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.</li>
|
||
<li><a href="https://davidwalsh.name/canvas-demos">Canvas Demos by David
|
||
Walsh</a> - 9 Mind-Blowing Canvas Demos with their respective source
|
||
code.</li>
|
||
<li><a href="http://acko.net/blog/js1k-demo-the-making-of/">Procedural
|
||
Drawing in Canvas</a> - a tutorial that explains more about how
|
||
procedural drawing works so that others can also learn the skill and
|
||
start producing their own patterns.</li>
|
||
<li><a
|
||
href="https://html.spec.whatwg.org/multipage/scripting.html#the-canvas-element">The
|
||
canvas element in the HTML5 draft standard</a></li>
|
||
<li><a
|
||
href="https://msdn.microsoft.com/en-us/ie/hh410106#_HTML5_canvas">Internet
|
||
Explorer 9 Guide for Developers: HTML5 canvas element</a></li>
|
||
<li><a
|
||
href="http://www.felinesoft.com/blog/index.php/2010/09/accelerated-game-programming-with-html5-and-canvas/">Accelerated
|
||
Game Programming with HTML5 and canvas</a> - this tutorial describes the
|
||
structure of a typical game class in JavaScript, drawing to the canvas,
|
||
double buffering, map/tile representation and player movement.</li>
|
||
<li><a href="http://labs.skookum.com/demos/barcampclt_physics/">Physics
|
||
for Lazy Game Developers</a> - Provides examples of velocity,
|
||
acceleration, collisions, rotation and particle effects.</li>
|
||
<li><a
|
||
href="https://medium.com/@raphamorim/draw-particles-using-html5-canvas-6151ab214f7a">Draw
|
||
Particles using HTML5 Canvas</a> - Shortcut tutorial shows how create
|
||
simple and colorful particles.</li>
|
||
<li><a
|
||
href="http://www.williammalone.com/articles/create-html5-canvas-javascript-game-character/1/">Create
|
||
a game chracter with HTML5 and JavaScript - Part 1</a></li>
|
||
<li><a
|
||
href="http://www.williammalone.com/articles/create-html5-canvas-javascript-game-character/2/">Create
|
||
a game chracter with HTML5 and JavaScript - Part 2</a></li>
|
||
<li><a
|
||
href="https://www.khanacademy.org/computing/hour-of-code/hour-of-code-tutorial/v/welcome-hour-of-code">Khan
|
||
Academy - Hour of Drawing with Code</a></li>
|
||
<li><a
|
||
href="http://students.cs.ucl.ac.uk/schoolslab/projects/HT5">Making a
|
||
Lunar Lander in JavaScript</a> - A 5 lesson tutorial that explain how to
|
||
make a Lunar Lander game in JavaScript.</li>
|
||
<li><a
|
||
href="https://www.w3schools.com/graphics/canvas_intro.asp">W3Schools
|
||
Canvas Tutorial</a> - Tutorial covering various features and methods and
|
||
with many practical examples</li>
|
||
</ul>
|
||
<h2 id="license">License</h2>
|
||
<p>The content of this project itself is licensed under the <a
|
||
href="http://creativecommons.org/licenses/by/3.0/us/deed.en_US">Creative
|
||
Commons Attribution 3.0 license</a>.</p>
|
||
<p><a href="https://github.com/raphamorim/awesome-canvas">canvas.md
|
||
Github</a></p>
|