AwesomeList

444 awesome lists. 23 categories. 409 curators. I feel lucky.
Front-End Development

Canvas

A curated list of awesome HTML5 Canvas with examples, related articles and posts.

awesomeawesome-canvasawesome-listcanvas-elementcanvas2ddraw-graphicshtml5-canvasjavascriptparticles

raphamorimraphamorim/awesome-canvasUpdated 550 45 74

Contents

Awesome Canvas

Awesome

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

Libraries

To draw using canvas

  • Akihabara is HTML5 games library for making pixel based games using Javascript and the canvas tag.
  • ChemDoodle 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 (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.
  • fabric.js provides interactive object model on top of canvas element and also has SVG-to-canvas (and canvas-to-SVG) parser
  • iio.js - A javascript library that speeds the creation and deployment of HTML5 Canvas applications
  • Konva - Konva.js is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.
  • Origami.js - JS Lib to redesign canvas API interface
  • p5.js - p5.js is a JS client-side library for creating graphic and interactive experiences
  • Paper.js - Scriptographer ported to JavaScript and the browser, using HTML5 Canvas.
  • Pixi.js - Super fast HTML 5 2D rendering engine that uses webGL with canvas fallback
  • Processingjs is a data visualization programming language.
  • Proton is a lightweight and powerful javascript particle engine. With it you can easily create countless cool effects
  • Pts.js - Pts is a javascript library for visualization and creative-coding.
  • Sketch - Cross-Platform JavaScript Creative Coding Framework
  • Three.js is a javascript library that makes WebGL - 3D in the browser, however you can render using canvas instead of WebGL
  • Visualize is a JQuery plugin who creates charts and graphs from tabular data using the HTML canvas element.

For other purposes, but still use canvas

  • React Canvas - High performance rendering for React components.

Resources

Where to discover more about Canvas.

Talks

Books

Twitter

Websites && Tutorials

License

The content of this project itself is licensed under the Creative Commons Attribution 3.0 license.

Built With LoveBuilt With LoveSearch by