HTML and CSS Reference
In-Depth Information
interactivity, and transitions. KinectJS can handle many types of interactivity events, including mouse clicks, touches,
taps, and drags. With its rich feature set and small file size (66 kilobytes), you're sure to see this library in many
advertising campaigns that utilize the
canvas
element.
ProcessingJS
I'd like to touch on another library, but it's certainly not the last in the long and growing list of
canvas
JavaScript
libraries on the market. ProcessingJS (
processingjs.org
)
is formulated from the Processing language, which is a
Java-based visualization language that has been used in many feature films to create node-based, “networky,” and
abstract elements. ProcessingJS's library is powerful; it can create some pretty compelling creative experiences
(
processingjs.org/exhibition
)
. I'm including this library because it's both amazing and heavy—so very heavy that
I'd advise against using ProcessingJS in advertising environments as the code base. It's a staggering 400-plus kilobytes
in size just to include the library, not to mention your own codebase to work with the
canvas
element. Keep this in
mind as you and your client build experiences using
canvas
. Just because it looks great to you doesn't mean all your
users will get the same experience, especially when file size is this large.
These libraries are out there, most of them free to use. I mention them just to showcase that there are many
options, but not every single one is suitable for the advertising space. So keep in mind the overall user experience,
load time, and publisher k-weight restrictions. Working backwards from the defined pub spec will allow you to choose
the correct library, should you need to go down that path.
Canvas Examples
So far I've covered working on the
canvas
element a bit, as well as external JavaScript libraries that can speed up
development time when working with this new element. You've seen what it can do and how it can help your creative
process and even some limitations when working with it in advertising. In the next few sections, we'll cover working
with the canvas element without the need for third-party plugins. This will allow you to get your hands dirty quickly
without needing to rely on external libraries. That said, if you do use a library, the syntax will undoubtedly change
when you use them, so be sure to check out the API documentation before digging in.
Lines
Lines are used all the time in advertising campaigns. They're great for presenting a path—map directions, vector
drawings, even charting a graph. The use cases for lines within the ad's creative are extensive. Listing 4-4 shows how to
render a simple line using HTML5's
canvas
element.
Listing 4-4.
Rendering a Line with Canvas
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<canvas id="adCanvas"></canvas>
</body>
<script>
//get a reference to the canvas
var canvas = document.getElementById('adCanvas');
var context = canvas.getContext('2d');
