HTML5 Canvas with Dave Shea

One of the great things about living in Vancouver is the abundance of tech talent. Last night, for instance, CSS Zen Garden creator/author, Dave Shea, shared his thoughts and experiences with HTML5 Canvas, at an HTML5 Meetup. Dave also introduced us to his own canvas project, Paintbrush JS. Modernizr creator, Faruk Ates, also gave a brief intro to his project, which I first discussed here.

  1. Intro
  2. Demos
  3. What (is canvas)?
  4. Why (use it)?
  5. Canvas vs. SVG Graphics
  6. Code
  7. Resources


Dave pointed out that there are a lot of similarities between Canvas and Processing, a Java-based, open-source language, originally developed to teach the basics of programming.


The five demos he showed us:

  1. The basic balls chasing the cursor.
  2. Paintbrush JS – a JS library that allows you to do photoshop-like effects, real-time in the browser.
  3. Interacting with video.
  4. Grabbing data from Google street maps, then applying real-time, 3D stereographic effects to images of buildings in the area. *if anyone has the link to this, please share it in the comments.
  5. Using Microsoft Kinect with HTML5 Canvas to animate a human model. *if anyone has the link to this, please share it in the comments.

What (is Canvas)?

Canvas is not CSS3, but it is a general purpose drawing region in an HTML5 element. It allows pixel oriented, bitmap drawing. It is, pretty much, all JS. Canvas was introduced by Apple in 2005, but is now part of HTML5.

Within an HTML5 web page, the following code will give you a canvas area. The fallback content within the paragraph tags is not strictly necessary – it’s just a way of providing an explanation for people using browsers that do not support canvas.

fallback content


Canvas is:

  • dynamic
  • scriptable
  • procedural
  • basically, 2D.

It does not use the DOM. If you want to create 3D objects and spaces, use WebGL.

Why (Use Canvas)?

“Well,” says Dave, “We don’t really know yet!”

It’s good for:

  1. replacing flash content – but, it’s not vectors. Once a Canvas object is plotted, it cannot be manipulated in the same way vectors can.
  2. charts, graphs and live data,
  3. generated graphics,
  4. pixel manipulation,
  5. basic animation – but, not for games.

Canvas Vs. SVG

Canvas Vs. SVGCanvas is widely implemented, and has more visibility than SVG. Additionally, there are workarounds for using Canvas with older browsers. While SVG and Canvas do overlap, they are not complementary. You will be using either one or the other. The main technical difference between them is that SVG is DOM-based while Canvas is procedural. The chart above is from Visit the web page for more information.

Canvas and Internet Explorer

Internet Explorer 9 supports Canvas. For IE8 and below, use Another option is to use Google’s Chrome Frame.


Because of Canvas’s frame by frame drawing, it is a CPU hog. It can be fast on hardware accelerated desktops, but is slow on mobile. There are a few basic API’s for creating interaction with Canvas: PaperJS is one; MooTools has a library – but essentially, you need to write your own event handlers.

Getting Vectors into Canvas

Is tricky! Opacity, a sort of “Illustrator light” program, exports to native Canvas, while Adobe CS5 and above provide some support.

The best solution remains exporting your vector art to SVG, then from SVG to Canvas. Another tool for getting vector art into Canvas is SVGCanvas. Lastly, here’s Dave’s blog post on moving artwork from Adobe Illustrator to Canvas.

Pixel Manipulation

Canvas is more pixel friendly than SVG. It gives you the ability to adjust hue, colour, saturation and other Photoshop-like settings to images right in the browser., like Dave’s Paintbrush JS is a JS library that utilizes Canvas to apply a multitude of Photoshop-like filters and effects to browser images, in realtime.


Here are a few terms from Canvas’ code base:

  • Radians,” not “degrees” to rotate elements.
  • “Functions” group code for specific elements.
  • Compositing” modes are like Photoshop’s “screen, lighten, multiply, etc.” blending options for layers.
  • Saving” and “restoring” contexts are used for animation.



2017-03-31T06:20:00+00:00 Categories: Events, How-To|

About the Author: