Game Development Reference
In-Depth Information
ctx = canvas.getContext("2d");
ctxOff = canvasOff.getContext("2d");
// Make the canvas - not video player -
visible
poster.parentNode.removeChild(poster);
document.body.appendChild(canvas);
}
renderOnCanvas();
}
function renderOnCanvas() {
// Draw frame to canvas if video is still
playing
if (!video.paused && !video.ended) {
// Draw original frame to offscreen canvas
ctxOff.drawImage(video, 0, 0, canvas.width,
canvas.height);
// Manipulate frames offscreen
var frame = getVideoFrame();
// Draw new frame to visible video player
ctx.putImageData(frame, 0, 0);
requestAnimationFrame(renderOnCanvas);
}
}
function getVideoFrame() {
var img = ctxOff.getImageData
(0, 0, canvas.width, canvas.height);
// Invert the color of every pixel in the
canvas context
for (var i = 0, len = img.data.length; i <
len; i += 4) {
