Awesome Canvas


A curated list of awesome Canvas examples, related articles and posts. Inspired by awesome-python.


Please take a quick gander at the contribution guidelines first.




"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


Some good examples about creation with canvas.


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.


Where to discover more about Canvas.




Websites and Tutorials


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