The HTML5 Canvas Text API - HTML5 Canvas - page 171

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 ef-
fects with very little effort.

Tocreate a shadowEffect ,therearefourproperties oftheCanvascontextthatneedtobema-
nipulated:

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 ;

Just as 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 var textAlpha = 1 ;

var

var shadowX = 1 ;
var var shadowY = 1 ;

var var shadowBlur = 1 ;

var

var shadowColor = "#707070" ;