Skip to content

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

License

Notifications You must be signed in to change notification settings

raphamorim/awesome-canvas

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

94 Commits
 
 
 
 
 
 
 
 

Repository files navigation

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

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.
  • Chart.js is a lightweight JavaScript library for creating dynamic and visually appealing charts using the HTML5 Canvas element.
  • 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.
  • 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 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
  • isomerjs - An isometric graphics library for HTML5 canvas
  • Javascript-Voronoi - A Javascript implementation of Fortune's algorithm to compute Voronoi cells
  • 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.
  • Pencil.js - Nice modular Javascript library with clear OOP syntaxe and lots of features.
  • 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.
  • Rough.js - Rough.js is a graphics library that lets you draw in a sketchy, hand-drawn-like, style
  • Scrawl-canvas - easily add multiple responsive, accessible and interactive <canvas> elements to a web page
  • 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
  • tsParticles 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.)
  • Visualize is a JQuery plugin who creates charts and graphs from tabular data using the HTML canvas element.
  • zDog - Flat, round, designer-friendly pseudo-3D engine for canvas & SVG
  • ZIM - ZIM is a general Canvas Framework with simple, powerful JavaScript that lets everyone, from beginners to professionals, code creativity.
  • zrender - A lightweight canvas library which providing 2d draw for Apache ECharts (incubating)

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 and Tutorials

License

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