rhetenor/awesome-awesomeness
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update lists

Browse Source
This commit is contained in:
Jonas Zeunert
2025-07-18 22:22:32 +02:00
parent 55bed3b4a1
commit 5916c5c074
3078 changed files with 331679 additions and 357255 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
terminal/canvas
View File

@@ -1,4 +1,4 @@
 Awesome Canvas
 Awesome Canvas
!Awesome (https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg) (https://github.com/sindresorhus/awesome)
@@ -28,8 +28,8 @@
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 (https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API)
"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 (https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API)
Examples
@@ -37,18 +37,18 @@
⟡ 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.
⟡ 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.
⟡ 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.
⟡ Canvas Loader (http://cssdeck.com/labs/full/4do6cnjm) show me the code (http://cssdeck.com/labs/4do6cnjm) • Reference to make loaders using canvas.
⟡ 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.
⟡ 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.
⟡ Cloth Effect (http://raphamorim.io/canvas-experiments/cloth) show me the code (https://github.com/raphamorim/canvas-experiments) • A cloth 3D effect fork.
⟡ 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.
⟡ 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.
⟡ 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.
⟡ 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.
⟡ 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.
⟡ 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.
⟡ 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.
⟡ 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 
⟡ 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.
@@ -62,8 +62,8 @@
⟡ 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.
⟡ Particles (http://codepen.io/pixelgrid/full/ECrKd) show me the code (http://codepen.io/pixelgrid/pen/ECrKd) • Reference to create astonishing particles.
⟡ Particles.js (http://codepen.io/VincentGarreau/full/pnlso/) show me the code (http://codepen.io/VincentGarreau/pen/pnlso) • Beautiful particles created using canvas.
⟡ 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.
⟡ 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.
⟡ Pirates Love Daisies (http://www.pirateslovedaisies.com/) • A entire game created using canvas
⟡ PixelCraft (https://github.com/rgab1508/PixelCraft) • A pixel-art editor made using canvas
⟡ 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.
@@ -88,8 +88,8 @@
- Chart.js (https://github.com/chartjs/Chart.js) is a lightweight JavaScript library for creating dynamic and visually appealing charts using the HTML5 Canvas element.
- 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.
- d3 (https://github.com/d3/d3) (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.
- EaselJS (https://createjs.com/easeljs) 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.
- EaselJS (https://createjs.com/easeljs) 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.
- fabric.js (http://fabricjs.com) provides interactive object model on top of canvas element
and also has SVG-to-canvas (and canvas-to-SVG) parser
- iio.js (https://github.com/iioinc/iio.js) - A javascript library that speeds the creation and deployment of HTML5 Canvas applications
@@ -154,20 +154,20 @@
Websites and Tutorials
- 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.
- 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.
- HTML5 Canvas Tutorials (http://www.html5canvastutorials.com/)
- 31 days of canvas (http://creativejs.com/2011/08/31-days-of-canvas-tutorials/)
- 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.
- 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.
- 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.
- 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.
- Canvas Demos by David Walsh (https://davidwalsh.name/canvas-demos) - 9 Mind-Blowing Canvas Demos with their respective source code.
- 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.
- The canvas element in the HTML5 draft standard (https://html.spec.whatwg.org/multipage/scripting.html#the-canvas-element)
- Internet Explorer 9 Guide for Developers: HTML5 canvas element (https://msdn.microsoft.com/en-us/ie/hh410106#_HTML5_canvas)
- 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.
- 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.
- Physics for Lazy Game Developers (http://labs.skookum.com/demos/barcampclt_physics/) - Provides examples of velocity, acceleration, collisions, rotation and particle effects.
- Draw Particles using HTML5 Canvas (https://medium.com/@raphamorim/draw-particles-using-html5-canvas-6151ab214f7a) - Shortcut tutorial shows how create simple and colorful particles.
- Create a game chracter with HTML5 and JavaScript - Part 1 (http://www.williammalone.com/articles/create-html5-canvas-javascript-game-character/1/)
@@ -179,3 +179,5 @@
License
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).
canvas Github: https://github.com/raphamorim/awesome-canvas