Animating the Canvas Animation is achieved with the following: 1.Clear the area that is changing context.clearRect(x, y, width, height); 2.Save the canvas state context.save(); 3.Draw the parts that changed 4.Restore the canvas state context.restore();

Transformations Affine transformations apply to entire canvas, and are cumulative –Translate –Scale –Rotate –Shear –Mirror State can be saved/restored on a stack –context.save(); –context.restore();

Scheduled Updates Executing a function at regular intervals –Delay = milliseconds –Setting the function: var intID = setInterval(func, delay [, param1, param2, …]); –Clearing the function: clearInterval(intID); Exectuing a function after a delay –Setting the function: var toID = setTimeout(func, delay [, param1, param2, …]); –Clearing the function: clearTimeout(toID);

Updates Based on User Input Add an event listener target.addEventListener(type, listener, usecapture); Type is any event type Remove an event listener target.removeEventListener(type, listener, usecapture);

Tips & Tricks Layer canvases Draw shapes once, copy over and over Update only areas that change For complex changes, use double- buffering