HTML and CSS Reference
per second = about 67, or approximately 15 fps—equally 25fps
would be 1000/25), which should be good enough for faking
video playback. Once inside the setInterval , I'll loop over the
width of the canvas, incrementing by the size of the thumbnail
I'm drawing to fill the canvas horizontally.
The mapping for the arguments to the drawImage method is
shown in Figure 5.14 .
FIguRE 5.14 A visual
representation of arguments
passed to drawImage .
Using a simple crop for the height and width, and using the
shortest edge, I can then easily scale the crop to the thumbnail
size and let the canvas do all the hard work for me. The result:
Bruce bashing a banana across the top of my site ( Figure 5.15 ).
FIguRE 5.15 An animated
banner across my site using
canvas and video.