HTML5 Canvas with Dave Shea

Malcolm van Delst Profile Photo
Malcolm van Delst

on

January 13, 2012

HTML5 Canvas with Dave Shea

HTML5 Canvas with Dave SheaOne 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.

[Above: Photo by Boris Mann. More pics here.]

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

Intro

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.

Demos

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.

<canvas id=”Name-your-canvas” width=”500” height=”200”>

<p> fallback content </p>

</canvas>

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 http://sitepoint.com/how-to-choose-between-canvas-and-svg. Visit the web page for more information.

Canvas and Internet Explorer

Internet Explorer 9 supports Canvas. For IE8 and below, use http://code.google.com/p/explorercanvas/. Another option is to use Google's Chrome Frame.

Animation

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. Pixastic.com, 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.

Code

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.

Resources

 

Share it!

Canvas was initially introduced by Apple for use inside their own Mac OS X WebKit component in 2004,[1] powering applications like Dashboard widgets and the Safari browser. Later, in 2005 it was adopted in version 1.8 of Gecko browsers[2], and Opera in 2006,[3] and standardized by the Web Hypertext Application Technology Working Group (WHATWG) on new proposed specifications for next generation web technologies.[citation needed][edit] UsageCanvas consists of a drawable region defined in HTML code with height and width attributes. JavaScript code may access the area through a full set of drawing functions similar to those of other common 2D APIs, thus allowing for dynamically generated graphics. Some anticipated uses of canvas include building graphs, animations, games, and image composition.i found above story from below linkhttp://en.wikipedia.org/wiki/Canvas_element