HTML and CSS Reference
In-Depth Information
good justification for the use of such a filter: being able to increase or decrease the brightness
of the video.
I created a global variable,
brightness
, used to track the current video's brightness setting. I
also added two new buttons to the web page: one to decrease the brightness level of the video,
and one to increase it.
Next, I added a new filter function,
adjBrightness
, that takes pixel data and an adjustment
indicator to increase or decrease the brightness of the video:
function adjBrightness(pixels, adjustment) {
var d = pixels.data;
for (var i=0; i<d.length; i+=4) {
d[i] += adjustment;
d[i+1] += adjustment;
d[i+2] += adjustment;
}
return pixels;
}
I also added event listeners to the button elements'
click
events. In the
click
event handler
functions, the code increases or decreases the brightness variable accordingly.
Example 4-4
contains the complete web page.
Example4-4.Video playback in canvas with brightness controls
<!DOCTYPE html>
<head>
<title>Adjust Video Brightness</title>
<meta charset="utf-8" />
<style>
#backcanvas { display: none; }
</style>
<script>
var brightness = 0;
// adjust brightness
function adjBrightness(pixels, adjustment) {
var d = pixels.data;
for (var i=0; i<d.length; i+=4) {
d[i] += adjustment;
d[i+1] += adjustment;
d[i+2] += adjustment;
}
return pixels;
}
