Game Development Reference
In-Depth Information
One way to achieve this result is to create two canvas elements. If we only draw to
the same canvas (draw the frame from the video, then manipulate that frame, then
draw the next frame, and so on), the customized frame would only be visible for a
fraction of a second. It would only be visible until we quickly drew the next incom-
ing frame. In turn, this next frame would only be visible for as long as we looped
through that frame's pixel data and redrew that frame again. You get the idea, the
result would be messy, and not at all what we want.
So instead we use two canvas contexts. One context will be in charge of only dis-
playing the pixels we work on (also known as, the manipulated pixels) and the other
context will never be visible to the user and will serve the purpose of holding each
frame as it comes straight from the video. This way, we're only drawing to our main,
visible canvas once per iteration and all that's ever displayed in this canvas context
is the manipulated pixels. The original pixels (also known as, the pixels from the ori-
ginal video that's playing in memory) will continue to be streamed to the offscreen
canvas context as fast as they can.
