ExplorerCanvas: Interactive Web Apps
In my Supertrain article, I showed how to use the HTML canvas element to draw dynamically changing server-side information using AJAX. In that example, the user was a passive recipient of information. In this article, I will demonstrate how to handle user input to allow your canvas applications to reach the next level of interactivity.
But first, we need to catch up on some of the happenings in the canvas space. In my Supertrain article, I highlighted some of the shortcomings of the canvas element: 1) supported only in Firefox and Safari, and 2) no support for rendering text. In the last few months these limitations have been blown away thanks to the growing canvas developer community. There are now at least two different ways to render text. One was provided by Benjamin Joffe and another by Mihai Parparita. I incorporated Benjamin's drawString method into http://awordlike.com/ and brought it one step closer to being an actual clone of The Visual Thesaurus. The other shortcoming was a killer: Internet Explorer does not (and will not) support the canvas element. Several canvas developers (including Emil Eklund) attacked this problem early on, and some progress was made, but the recent emergence of the ExplorerCanvas project, backed by Google, has made a ubiquitous canvas a reality.
In this article, I won't be using text, but the example will be supported on Internet Explorer (along with Safari and Firefox). Now, on with the show ...
Cosley Petting Zoo in Wheaton, Illinois, has asked me to create an interactive front end to allow their zoologists to record the movements of their new baby red squirrel as it wanders around the zoo. The zoologists use tablet PCs running Internet Explorer 6, and the petting zoo is equipped with a WiFi network. All of the zoologists share the reponsibility for monitoring their new baby red squirrel and want to stay up-to-date on its whereabouts. They need to be able to easily update its location when it is spotted.
With my canvas-AJAX hammer in hand, my solution should come as no surprise. By the end of this article I will have incrementally built up a first release to deploy onto the Cosley web server to get some quick feedback from the zoologists (here's a working example). I'll start with an HTML page with a canvas that corresponds roughly with the area the baby red squirrel will be roaming.
InteractiveCanvas.html
<html>
<head>
<script type="text/javascript" src="excanvas.js"></script>
</head>
<body>
<canvas id="zoo" width="500" height="300" style="border: 1px solid black"></canvas>
</body>
</html>The only interesting thing going on here is the inclusion of ExplorerCanvas, which is all I need to do to get canvas to show up in Internet Explorer. Next I'll draw the token that represents the squirrel, which, because I'm so lazy, is a circle.
InteractiveCanvas.html
<html>
<head>
<script type="text/javascript" src="excanvas.js"></script>
<script type="text/javascript" src="prototype-1.4.0.js"></script>
<script type="text/javascript">
window.onload = function() {
var context = $("zoo").getContext("2d");
context.beginPath();
context.arc(50, 50, 10, 0, 2*Math.PI, false);
context.closePath();
context.fill();
};
</script>
</head>
<body>
<canvas id="zoo" width="500" height="300" style="border: 1px solid black"></canvas>
</body>
</html>Again, nothing fancy. I have included the Prototype JavaScript library because I'm lazy and I'd rather type $() than document.getElementById(). Plus, I'll use Prototype for AJAX later on. Other than that, I drew a circle and filled it. Now, I want to move the squirrel.
