Custom Graphics for Your Web Application: The HTML5 Canvas and Kinetic.js

More Information:

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.

Jason Follas is an Architect for Perficient, helping clients located in the greater Detroit region (including Toledo, where he lives and leads the Northwest Ohio .NET User Group). For the past two decades, he has created interesting solutions using Microsoft technologies, including an aircraft load planning system that was used by an international air freight company, geospatial web applications, and material blend optimization software.


HCR ManorCare
333 North Summit St.
Toledo, OH 43604, US (map)

More Information: