The HTML5 Canvas Text API - HTML5 Canvas - page 183

Handling Gradients and Patterns in Text Arranger

Text Arranger 3.0 includes many changes that were implemented to support using gradients
and image patterns with text on HTML5 Canvas. To see these changes in action, we first
need to make sure that we have preloaded the texture.jpg image, which we will use for the
context.createPattern() functionality. To do this, we will create a new function named
eventAssetsLoaded() thatwewillsetastheeventhandlerforthe onload eventofthe Image
objectthatwillholdthepattern.Whenthatimagehasloaded,wewillcall canvasApp() inthe
same way we called it from eventWindowLoaded() :

function function eventWindowLoaded () {

var

var patternImage = new new Image ();

patternImage . src = "texture.jpg" ;
patternImage . onload = eventAssetsLoaded ;

}

function function eventAssetsLoaded () {

canvasApp ();

}

NOTE
We are not going to use the pattern variable we created in this function, because it does not have
scope in the canvasApp() function. We are merely using it to make sure that the image is available
before we use it.

In the canvasApp() function, we will create three variables to support this new functionality.
fillType describes how the text will be filled (a regular color fill, a linear gradient, a radial
gradient, or a pattern). The textColorFill2 variable is the second color we will use for the
gradientcolorstop.Finally,the pattern variableholdsthe Image objectwepreloaded,which
we now need to create an instance of in canvasApp() :

var var fillType = "colorFill" ;

var

var textFillColor2 = "#000000" ;
var

var pattern = new new Image ();

...
pattern . src = "texture.jpg" ;