Canvas - Introducing HTML5 - page 128

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; by separating
it in a timer, it gives the browser some room to breathe.
Once the loadeddata event fi res on the video, I'm going to initia-
lise the canvas, so that it's the same width as the window (other-
wise 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
shortest 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);