Canvas Demos

• Related to SVG, in that both can draw on the browser -- like step brothers
• Pixel based graphics instead of vector
• Introduced by Apple, resembles Apple's drawing api
• Also similar to Windows GDI (and GDI.net)

Similarity to SVG

• Can be used to draw on a web page
• Has its own Javascript api

Differences to SVG

• No Markup Language
• All drawing via Javascript
• Javascript does not require namespace
• No CSS support in Canvas
• SVG has multiple primative types (like circle)...Canvas is 'Do it yourself'

Getting Started

HTML

<canvas id="canvas1" width="300" height="300">
  Sorry you don't support this content
</canvas>

JavaScript

var c1 = document.getElementById('canvas1');
var ctx = c1.getContext('2d');

Demo

Many demos shamelessly stolen from Mozilla Developer Network [http://developer.mozilla.org].

• Filled Rectangles
• Outlined Rectangles
• Draw Path
• Draw Arcs
• Draw Image
• Draw On Image
• Draw Text on Image
• Display In Image
• Open File System Image

Libraries

• Flot.js is an open-source charting library
• chartjs is an open-source charting library
• Fabric.js is an open-source canvas library with SVG parsing capabilities
• Kinetic.js is an open-source canvas library focused on interactivity for desktop and mobile applications
• Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas
• libCanvas is powerful and lightweight canvas framework
• Processing.js is a port of the Processing visualization language
• EaselJS is a library with a Flash-like API
• PlotKit is a charting and graphing library
• Rekapi is an animation keyframing API for Canvas
• PhiloGL is a WebGL framework for data visualization, creative coding and game development.
• JavaScript InfoVis Toolkit creates interactive 2D Canvas data visualizations for the Web.
• Frame-Engine is a framework for developping applications and games