HTML and CSS Reference
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-
The color of the shadow. This uses the same “#RRGGBB” format of the fillStyle and
The x offset of shadow. This can be a positive or negative number.
The y offset of shadow. This can be a positive or negative number.
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 textAlpha = 1 ;
var shadowX = 1 ;
var shadowY = 1 ;
var shadowBlur = 1 ;
var shadowColor = "#707070" ;