Using Canvas, SVG, and Web Fonts - HTML5 Advertising - page 65

Ticker.setFPS(fps);
Ticker.addListener(window);
}
}
function tick() {
var splitX = (stage.mouseX - logo.x) * speed;
var splitY = (stage.mouseY - logo.y) * speed;
logo.x += splitX;
logo.y += splitY;
logo.updateCache();
logo.filters = [new BoxBlurFilter(5000, 5000, 2)];
stage.update();
}
</script>
</html>
OK, that's quite a bit of code to work through, but anyone coming from a Flash or ActionScript background will
attest that, as far as syntax is concerned, it's pretty much as close as it gets in JavaScript. In the init function, the
similarities to Flash are very great. So if you're working with graphics in HTML5, I'd strongly suggest taking a look
at EaselJS—not just for its ease of use but also for its light footprint. It comes in only around 45 kilobytes—usually
enough to bring in a bit of overhead to pull off some really amazing graphics, assuming that the publisher doesn't
have this library included in its site by default.
Let's break down the code sample in Listing 4-3. First, set up the canvas element and create some variables by
writing var stage, canvas = document.getElementById("canvas"), context = canvas.getContext("2D"),
logoImage = new Image(), logo, fps = 30, speed = 0.2; . For the occasional JavaScript user, nothing so far is
new. Second, create the init method by writing init(); , which will kick things off. Then pass the canvas element to
the stage object, as specified in EaselJS—again, very similar to ActionScript. Third, create the image and assign it to
a Bitmap object by writing logo = new Bitmap(logoImage); and add to the stage by calling the addChild method
(another ActionScript code snippet). The last portion is what drives the animation. The Ticker object is essentially
the application's heartbeat; it gets called at a certain number of frames per second. In this case, 30, as defined in the
variable above by writing Ticker.setFPS(fps); . The tick method gets called in every frame of animation. Apply the
logo movement based on users' mouse coordinates, and apply a nice motion blur filter by calling the BoxBlurFilter
in the EaselJS framework, which is found in the tick method and Wahlaa!. You've just created your first canvas
based animation using EaselJS. Obviously there is much more to this library and I encourage you to try out more
on your own time by digging into the docs [ http://www.createjs.com/Docs/EaselJS ] . Perhaps, start by taking a
previous Flash based ad unit and convert it over. If you're serious about working with the canvas element, I strongly
recommend you get very familiar with EaselJS. It will make development when working with the canvas element a lot
cleaner, especially if you're from a Flash/ActionScript background.
Other JavaScript Libraries
You may or may not be aware that many other JavaScript libraries can work with the canvas element, not just EaselJS.
It's important to understand the others in the marketplace, because there's a good chance you'll come across them
working in future campaigns or when assets get handed off between agency and ad servers. Let's look at two popular
ones: KinectJS and ProcessingJS.
KinectJS
KinectJS ( kineticjs.com ) is a canvas JavaScript library that extends the two-dimensional context of canvas by
enabling path and pixel detection for desktop and mobile. You can add things on canvas and then add event listeners
to them—move them, scale them, and rotate them, independently of other elements, to support animations,