Custom Graphics for Your Web Application: The HTML5 Canvas and Kinetic.js
More Information:
http://www.fanug.org/2012/09/19/september-2012-meeting-announcement/HTML5 includes a Canvas element that allows for dynamic, scriptable rendering of 2D shapes and bitmap images. Using this, web developers can draw images directly in their web pages with JavaScript, enabling applications such as games, mapping, and data visualization to offload the rendering to the client. One problem with the Canvas, though, is that the rendered image is just that: an image. The user is unable to interact with any of the shapes that are drawn to the Canvas. However, an open source library called Kinetic bridges that gap, allowing shapes or images to be drawn using the existing Canvas API, event listeners attached to them, and manipulated individually using mouse or touch (i.e., move, scale and rotate). This session will introduce how to use the Canvas API and Kinetic.js in a desktop or mobile web application.