Page 5: Animation and Interaction with SVG and Canvas

Back on Page  1  (Web Graphics APIs), we saw animation with Canvas and SVG, and interaction with SVG. Now we will look at animation and interaction with Canvas in more detail.

The tricky thing is that with Canvas, we don’t store the objects. That means we don’t have anything to change - it’s up to the program to keep track of things and adjust them accordingly, and we need to redraw everything. Similarly, for interactions, there are no objects to generate events. The graphics “objects” only exist in our program, so we are responsible for creating events.

We’ll look at some implications of needing to represent objects in our own programs on this page.

Box 1: Animation with SVG and Canvas

When we animate, we need to change the image for each “frame”. With SVG, we modify the elements that change - and the picture gets updated accordingly. With Canvas, we have to update the picture ourselves.

In general, we will do this by (1) clearing the canvas and (2) redrawing everything. Notice that this is wasteful: we redraw things that didn’t change. If we really care about performance, we would try to figure out what changed and only change those parts.

With graphics, figuring out what changed and only changing those parts can be hard (especially with 3D). For example, moving one object might reveal new things behind it. The complexity of keeping track of what has changed may outweigh the extra effort to redraw things that didn’t change.

In almost all cases in this class, we will just clear the whole canvas and re-draw everything. We’ll just be careful to try to make “drawing everything” as fast as possible (which can be easier, since we don’t need to think about what not to draw).

Here’s an example (that we will come back to later):

Be sure to read the javascript code for this example ( 02-05-01.js). Notice that we can use the same animation loop for both elements (created using the box1animate function, which schedules itself to be called using window.requestAnimationFrame). For Canvas, we clear and redraw everything, each time. That includes all the rectangles in the “background”. For SVG, we only change the things that move. The web browser may or may not decide to redraw everything.

Box 2: Events for SVG Canvas

With SVG, because the graphics elements are HTML elements, we can assign events to them. In this example, I will handle all the onclick events for each of the objects. Try clicking on the rectangles.

When you look at the code ( 02-05-02a.js) notice how I make the rectangles (they are HTML elements), and I can add an onclick handler for them. In this case, the handler “toggles” a CSS class - which tells the browser to apply a style to the element (the style is defined in the html file).

This is possible because SVG keeps the rectangles in its data structures. When the mouse is clicked, it can check to see which of the objects it knows about should get the click.

The important point here is that SVG is keeping a list of objects (including the rectangles):

1. For animation, we change the position of the objects that moved. Behind the scenes, SVG uses the list of objects to redraw the image when things changed.
2. For interaction, we attach events to objects so they could respond to events. Behind the scenes, SVG uses the list of objects to check which one (if any) the mouse was in.

With Canvas, things will be more complicated since it won’t keep track of the objects for us. And those things that SVG is doing “behind the scenes” we’ll have to do ourselves.

We’ll discuss this on the next page.