I love <canvas>

I recently completed phase 1 of a web-based application that had a unique UI request… an interactive color wheel.  This didn’t initially seem technically complicated until several failed attempts later using variations of CSS animation, giant images, clickable svg’s, etc.  It just looked bad, and the experience was “clunky.”  Requirements of the app made this even more challenging including phone, tablet and retina display support.

I needed a way to create an interactive vector based UI that had the design and animation potential of Flash but run without proprietary plugin support.  I started looking into HTML5’s <canvas> element knowing it had the vector drawing capabilities I was looking for but would it allow me to create that Flash-esque interface, and still blend seamlessly into my HTML5 layout, and respond to normal DOM window events, and…? Yes.

I found a JavaScript library called KineticJS  that is specifically geared to coding graphics and animation for canvas.  What’s more is it includes support for grouping and layers and independent control of x,y and offsets.  The wheel is comprised of several independent wedge shapes mathematically drawn outward from the center point of the the current browser window.  Those shapes are then grouped into a new layer that has an independent x,y and offset value.  Since any rotation happens around 0,0 which is at the top left corner of the browser window, I offset that grouped layer half of the browser height and width, then move the x,y to those halved values effectively placing the rotation point of the wheel dead center of the wedge shapes.

The next issue was offsetting the entire wheel (according to the UI design specs) and keeping the rotation point intact.  KineticJS allowed me to simply offset the contents of my canvas element as it’s own layer like sliding a transparency around under an old-school projector.  So in the end I was able to accomplish the goal of the design within the technical requirements of the client all without the need for plugins or awkward CSS hacks.  Anyone looking to do out-of-the-box UI in a browser context shouldn’t overlook the power and versatility of <canvas>.  The only caveat is the required HTML5 compliant browser but really… it’s almost 2014 😉