The HTML5 Canvas Text API - HTML5 Canvas - page 106

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 use tempColor instead of textFill
Color . This will set the proper text fill choice that will be displayed on the canvas, as
shown in Figure 3-10 :
context.fillStyle = tempColor;
Width, Height, Scale, and toDataURL() Revisited
In Chapter 1 , we briefly discussed that you can set the width and height of the canvas,
as well as the scale (style width and height ) of the canvas display area, dynamically in
code. We also showed you an example of using the Canvas object's toDataURL() method
to export a “screenshot” of the Canvas application. In this section, we will revisit those
functions as they relate to Text Arranger 3.0.
Dynamically Resizing the Canvas
In the code we developed in this chapter, we created a reference to the Canvas object
on the HTML page—with the id canvasOne —and used it to retrieve the 2D context of
the Canvas object:
var theCanvas = document.getElementById("canvasOne");
var context = theCanvas.getContext("2d");
While the 2D context is very important because we used it to draw directly onto the
canvas, we did not spend any time discussing the Canvas object itself. In this chapter,
we use the width property of the Canvas object to center text on the canvas. However,
the Canvas object also includes another property named height , and both of these
properties can be used to dynamically resize the Canvas object on demand. Why would
you want to do this? There could be many uses, such as:
• Updating the canvas to the exact size of a loaded video object
• Dynamically animating the canvas after the page is loaded
• Other, more creative uses like the one we will experiment with next
Resizing the canvas on the fly is quite easy. To do it, simply set the width and height
properties of the Canvas object, and then redraw the canvas contents:
Canvas.width = 600;
Canvas.height = 500;
drawScreen();