Line 4 computes the number of pixels in the image by dividing the total size of the frame's image data by four.

This provides raw 32-bit pixel image data we can then manipulate.

Line 3 fetches a copy of the raw graphics data for the current frame of video by calling the getImageData() method on the first context. Note that you can pass the video element into the context's drawImage() method to draw the current video frame into the context. In line 2, that frame of video is copied into the graphics context ctx1 of the first canvas, specifying as the height and width the values we previously saved to draw the frame at half size. When this routine is called, the video element is displaying the most recent frame of video data, which looks like this:

The JavaScript code is imported from a script named processor.js.

Canvas c1 is used to display the current frame of the original video, while c2 is used to display the video after performing the chroma-keying effect c2 is preloaded with the still image that will be used to replace the green background in the video.

This document establishes two canvas elements, with the IDs c1 and c2.

The HTML document used to render this content is shown below.

Final media player used to copy video