Canvas - Introducing HTML5 - page 157

Now that the video loop is in place, I can start grabbing frames
from the video element. I could use the timeupdate event to
draw the canvas, but I know that the effect doesn't perform
anywhere nearly as well as if I run the canvas drawing in its own
timer. I could speculate that this is because the browser is trying
to do the hard work to render the video element; separating it in
a timer gives the browser some room to breathe.
Once the loadeddata event fires on the video, I'll initialise the
canvas so it's the same width as the window (otherwise our
image would stretch, as you saw in Figure 5.9). Then I'll mute
the video (to avoid being too annoying!) and calculate the short-
est edge because I want to crop a square from the video and
repeat it across the canvas:
video.addEventListener('loadeddata', function () {
var size = 78; // thumbnail size
canvas.width = window.innerWidth;
video.volume = 0;
shortestEdge = video.videoHeight > video.videoWidth ?
video.videoWidth :
video.videoHeight;
// kick off our drawing loop
setInterval(function () {
for (var i = 0, w = canvas.width; i < w; i += size) {
// arguments have been broken into multi lines
ctx.drawImage(
video,
(video.videoWidth - shortestEdge)/2, // sx
(video.videoHeight - shortestEdge)/2, // sy
shortestEdge, // sw
shortestEdge, // sh
i, // dx
0, // dy
size, // dh
size // dy
);
}
}, 67); // 67 is approximately 15fps
}, false);
All the magic happens inside the setInterval , which triggers
every 67/1000th of a second (JavaScript measures seconds
by 1000 milliseconds; therefore 1000 milliseconds/15 frames