The HTML5 Canvas Text API - HTML5 Canvas - page 95

The valid values for context.globalAlpha are numbers between 0.0 (transparent) and
1.0 (opaque), and they act as a percentage for the alpha value. For example, a 50%
alpha value would be coded like this:
context.globalAlpha = 0.5;
A 100% alpha (no transparency) would be coded like this:
context.globalAlpha = 1.0;
Handling globalAlpha transparencies
Besides the now-familiar elements that we included for most of the other configurable
options in Text Arranger, the globalAlpha property requires us to think a bit more about
when we use it and how it will affect the rest of the canvas.
First, we create a variable named textAlpha in the canvasApp() function and initialize
it with 1 , which means the text will have no transparency when it is first displayed:
var textAlpha = 1;
Next, in the drawImage() function, we need to set the globalAlpha property twice: once
before we draw the background and the bounding box frame…
function drawScreen() {
//Background
context.globalAlpha = 1;
…and then again to the value stored in textAlpha , just before rendering the text to the
canvas:
context.globalAlpha = textAlpha;
This will reset globalAlpha so we can draw the background, but it will still allow us to
use a configurable alpha value for the displayed text.
We will use another HTML5 range control in our form, but this time we set the value
range with a min of 0.0 and a max of 1.0, stepping 0.01 every time the range is moved:
Alpha: <input type="range" id="textAlpha"
min="0.0"
max="1.0"
step="0.01"
value="1.0"/>
The textAlphaChanged() function works just like the other event handler functions we
created in this chapter:
function textAlphaChanged(e) {
var target = e.target;
textAlpha = (target.value);
drawScreen();
}