Cover by Jeff Fulton, Steve Fulton

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

O'Reilly logo

Text and the Canvas Context

We’ve already discussed a couple Canvas context properties that affect the canvas in a global fashion: fillStyle and strokeStyle. However, there are two areas that visually demonstrate how changes to the properties of the context can affect the entire HTML5 Canvas: alpha transparencies and shadows.

Global Alpha and Text

Using alpha is a cool way to make objects seem to be partially or fully transparent on HTML5 Canvas. The globalAlpha property of the Canvas context is used for this purpose. After globalAlpha is applied, it affects all drawing on the canvas, so you need to be careful when setting it.

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();
   }

Also, don’t forget the event listener for the textAlpha range control:

formElement = document.getElementById("textAlpha");
formElement.addEventListener('change', textAlphaChanged, false);

The results will look like Figure 3-7.

Text with globalAlpha applied

Figure 3-7. Text with globalAlpha applied

Global Shadows and Text

HTML5 Canvas includes a unique set of properties for creating a shadow for drawings. The context.shadow functions are not unique to text, but they can make some very good text effects with very little effort.

To create a shadowEffect, there are four properties of the Canvas context that need to be manipulated:

context.shadowColor

The color of the shadow. This uses the same “#RRGGBB” format of the fillStyle and strokeStyle properties.

context.shadowOffsetX

The x offset of shadow. This can be a positive or negative number.

context.shadowOffsetY

The y offset of shadow. This can be a positive or negative number.

context.shadowBlur

The blur filter diffusion of the shadow. The higher the number, the more diffusion.

For example, if you want to create a red shadow that is 5 pixels to the right and 5 pixels down from your text, with a blur of 2 pixels, you would set the properties like this:

context.shadowColor = "#FF0000";
context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.shadowBlur = 2;

Handling global shadows

Just like we saw with globalAlpha, we must reset the shadow properties before we draw the background for textArranger; otherwise, the shadow will apply to the entire image. First, in the canvasApp() function, we create a set of variables to hold the shadow values:

var textAlpha = 1;
var shadowX = 1;
var shadowY = 1;
var shadowBlur = 1;
var shadowColor = "#707070";

We then make sure to turn off the shadow before we render the background for textArranger in the drawScreen(). We don’t have to reset the shadowColor, but we think it is good practice to update all the relative properties relating to any global change to the Canvas context:

context.shadowColor = "#707070";
context.shadowOffsetX = 0;
context.shadowOffsetY = 0;
context.shadowBlur = 0;

Later in drawScreen(), we render the shadow based on the settings in the four variables we created:

context.shadowColor = shadowColor;
context.shadowOffsetX = shadowX;
context.shadowOffsetY = shadowY;
context.shadowBlur = shadowBlur;

We also need to create the HTML to allow the user to update the shadow settings. We do this with three range controls, as well as another color picker using jsColor:

Shadow X:<input type="range" id="shadowX"
       min="−100"
       max="100"
       step="1"
       value="1"/>
<br>
Shadow Y:<input type="range" id="shadowY"
       min="−100"
       max="100"
       step="1"
       value="1"/>
<br>
Shadow Blur: <input type="range" id="shadowBlur"
       min="1"
       max="100"
       step="1"
       value="1" />
<br>
Shadow Color: <input class="color" id="shadowColor" value="707070"/>

Finally, we need to add the event listeners and event handler functions so the HTML form elements can communicate with the canvas. See the results in Figure 3-8:

formElement = document.getElementById("shadowX");
formElement.addEventListener('change', shadowXChanged, false);

formElement = document.getElementById("shadowY");
formElement.addEventListener('change', shadowYChanged, false);

formElement = document.getElementById("shadowBlur");
formElement.addEventListener('change', shadowBlurChanged, false);

formElement = document.getElementById("shadowColor");
formElement.addEventListener('change', shadowColorChanged, false);
function shadowXChanged(e) {
      var target = e.target;
      shadowX = target.value;
      drawScreen();
   }

   function shadowYChanged(e) {
      var target = e.target;
      shadowY = target.value;
      drawScreen();
   }

   function shadowBlurChanged(e) {
      var target = e.target;
      shadowBlur = target.value;
      drawScreen();
   }

   function shadowColorChanged(e) {
      var target = e.target;
      shadowColor = target.value;
      drawScreen();
   }
Text with global shadow applied

Figure 3-8. Text with global shadow applied

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required