Color Fill

Linear Gradient

Radial Gradient

pattern

We need to add a second color selection that we can use for the gradient fills. We will use the jsColor picker and the id textColorFill2:

Text Color 2:

Back in canvasApp(), we need to create the event listeners for our two new form elements:

formElement = document.getElementById("textFillColor2");

formElement.addEventListener('change', textFillColor2Changed, false);

formElement = document.getElementById("fillType");

formElement.addEventListener('change', fillTypeChanged, false);

We also need to create the associated event handler functions for the new form elements:

function textFillColor2Changed(e) {

var target = e.target;

textFillColor2 = "#" + target.value;

drawScreen();

}

function fillTypeChanged(e) {

var target = e.target;

fillType = target.value;

drawScreen();

}

We need to add support to drawScreen() for this new functionality. First, we use the measureText() method of the context to get the width of the text, which we will use to create the gradients:

var metrics = context.measureText(message);

var textWidth = metrics.width;

Then, we need to decide how to format our “color” for the fillStyle or strokeStyle of the context. In this instance, it can be a CSS color, a gradient, or an image pattern; the list below provides more information.

Color fill

If we are doing a simple color fill, we operate just like in previous versions of Text Arranger. All we need to do is make tempColor equal to the value of y.

Linear gradient

For the linear gradient, we need to decide what line we are going to create for the gradient. Our line will start at the beginning of the text (xPosition-textWidth/2 because the text uses the center alignment), and runs horizontally to the end of the text (textWidth). We also add two color stops (at 0 and 60%)—the colors are textFillColor1 and textFillColor2.

Radial gradient

For the radial gradient, we are going to create a cone that starts at the center of the text (xPosition,yPosition) with a radius the size of the font (fontSize). The cone will extend horizontally the width of the text (textWidth) with a radius of 1.

Pattern

For this option, we create a pattern using the pattern image variable we previously created. We designate it to repeat so it will tile horizontally and vertically.

Here’s the code:

var tempColor;

if (fillType == "colorFill") {

tempColor = textFillColor;

} else if (fillType == "linearGradient") {

var gradient = context.createLinearGradient(xPosition-

textWidth/2, yPosition, textWidth, yPosition);

gradient.addColorStop(0,textFillColor);

gradient.addColorStop(.6,textFillColor2);

tempColor = gradient;

} else if (fillType == "radialGradient") {

var gradient = context.createRadialGradient(xPosition, yPosition,

fontSize, xPosition+textWidth, yPosition, 1);

gradient.addColorStop(0,textFillColor);

gradient.addColorStop(.6,textFillColor2);

tempColor = gradient;

} else if (fillType == "pattern") {

var tempColor = context.createPattern(pattern,"repeat");

} else {

tempColor = textFillColor;

}

Now, when we set our fillStyle or strokeStyle, we