Game Development Reference
In-Depth Information
img.data[i] = 255 - img.data[i];
img.data[i + 1] = 255 - img.data[i + 1];
img.data[i + 2] = 255 - img.data[i + 2];
}
return img;
}
The idea is to play the video offscreen, meaning that the actual video player is never
attached to the DOM. The video still plays, but the browser never needs to blitz each
frame to the screen (it only plays in memory). As each frame is played, we draw that
frame to a canvas context (just like we do with images), take the pixels from the can-
vas context, manipulate the pixel data, then finally draw it back on to the canvas.
Since a video is nothing more than a sequence of frames played one after the other,
giving the illusion of animation, we can extract each frame from an HTML5 video and
use it with the canvas API just like any other image. Since there isn't a way to draw to
the video element, we simply keep on drawing each frame from the video player into
a plain canvas object, achieving the same result—but with carefully crafted pixels.
The following screenshot illustrates the result of this technique:
