Courses & TutorialsProgramming

Awesome HTML 5 Canvas – Massive Collection of Resources

Awesome Canvas

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

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

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button