HTML and CSS Reference
In-Depth Information
Listing 8.16. index.html—Change the composition mode in the
draw()
function
Video isn't the ideal format to experiment with composition modes because it's always a
fully opaque image, and in this example it's taking up all the pixels. But this simple im-
plementation will allow you to experiment and consider where you might use them in your
own projects.
step 3: Adjust the opacity of the video
The opacity is set with the
.globalAlpha
property. It should be a value between 0 and
1; in common with CSS, 1 is fully opaque and 0 is completely transparent. In your applic-
ation you can add an item to let the user set the value with a number input; add this code
after the
<menu>
element:
<label>
Opacity:
<input type
=
"number"
step=
"0.1"
min=
"0"
max=
"1"
value
=
"1.0"
>
</label>
As before, you need to attach an event handler to this input and feed the results into
the
draw()
function through a variable. The following listing has the additional code
to capture the opacity and another new
draw()
function. Replace the
draw()
function