The General Theory of RIAtivity

Today we’re going to cover vector graphics and animation on the iPhone which was discussed by Mark Malone, Internet Technologies Evangelist at Apple. Frankly, I was surprised that hardly anyone asked questions about this during the session because it was all new information to me. There was no mention of Canvas at the iPhoneDevCamp just a month earlier nor have I seen it discussed on the iPhoneWebDev Google group. So let’s jump right in…

First, we all know that iPhone doesn’t support the Adobe Flash plug-in or SVG. So how does one incorporate scalable vector graphics and animation into a web app intended for an iPhone Safari audience? The answer is Canvas.

Canvas 101
Canvas is an addition to the HTML 5 specification dealing with programmable vector graphics implemented using the <canvas> tag. There’s a bit of intermediate history to it, suffice it to say Canvas was born at Apple as part of their Mac OS X Dashboard SDK. If you want the nitty gritty I encourage you to check out the Mozilla Developer Wiki article on Canvas.

“So I can create vector graphics and animations for the iPhone!”, you say. “Great, where do I start? What IDE should I use?”

Stop right there. There’s no IDE. If you want to paint a circle on the screen you’ll be using your keyboard to do it, not a mouse. Here’s the code needed to draw a circle:

function drawShape(){

  var canvas = document.getElementById('myCanvas');  if (canvas.getContext){

    var myCircle = canvas.getContext('2d');

    var x          = 25;

    var y          = 25;

    var radius     = 20;

    var startAngle = 0;

    var endAngle   = Math.PI+(Math.PI*j)/2;

    var clockwise  = true;

    myCircle.arc(x,y,radius,startAngle,endAngle, clockwise);

    myCircle.fill();

  } else {

    alert('You need a browser that supports Canvas to see this demonstration.');

  }

}

There is some good news — several open source Canvas libraries have been written which make the task of drawing complex shapes and animations somewhat easier. Also, because no plug-in is required there’s no Flash-JavaScript bridging required (say goodbye to FSCommand). If you used the early versions of POVRay where an entire 3-D scene was modeled and rendered with code, then learning how to draw in Canvas should be relatively easy.

Animating in Canvas
Animations done with Canvas are a challenge unto themselves. Because there’s no timeline/frame construct with which to work, animating with Canvas requires constantly re-drawing the scene. The Mozilla Developer Wiki has a nice tutorial on animating in Canvas. It’s not for the wary, however. Alot of stuff (e.g. maintaining screen state, redraw intervals, etc.) which are handled transparently in Flash require programming intervention in Canvas.

Native iPhone Apps Use Canvas
Probably the tastiest morsel of information I got from the Apple iPhone Tech Talk was hearing Mark Malone explain that Apple developed all of the iPhone native applications, such as the Stocks, Clock, and Weather apps, using Canvas. It makes sense now when one understands that Apple developed Canvas as part of their Mac OS X Dashboard SDK for creating widgets. Who knew?

So, eager iPhone developers, cast aside your mice and styli and embrace your keyboards and JavaScript references — a world of compelling Canvas graphics and animation awaits you!