HTML and CSS Reference
In-Depth Information
// if not playing, quit
if (videoObj.paused || videoObj.ended) return false;
// create scratch canvas
var canvasObj = document.getElementById("canvasobj");
var bc = document.createElement("canvas");
bc.width=480;
bc.height=270;
// get contexts for scratch and display canvases
var ctx = canvasObj.getContext("2d");
var ctx2 = bc.getContext("2d");
// draw video on scratch and get its data
ctx2.drawImage(videoObj, 0, 0, 480, 270);
var pData = ctx2.getImageData(0,0,480,270);
// grayscale it and set to display canvas
pData = grayScale(pData);
ctx.putImageData(pData,0,0);
setTimeout(drawVideo,20);
}
</script>
Figure 4-2
shows the grayscale filter in action in Webkit Nightly. The grayscale effect also
works with IE10, Firefox, and Opera.
