• Choose a category
• All
• Classic-Fiction

By Root 6468 0

use tempColor instead of textFillColor. This will set the proper text fill choice that will be displayed on the canvas, as shown in Figure 3-10:

context.fillStyle = tempColor;

Figure 3-10. Text with image pattern applied

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();

The Canvas 2D API describes this function as a way to “scale” the canvas, but in practice, this does not appear to be true. Instead, the contents of the canvas are simply redrawn at the same size and same location on a larger canvas. Furthermore, if you don’t redraw the canvas content, it appears to be invalidated, blanking the canvas back to white. To properly scale the canvas, you need to use the CSS width and height attributes, as described in the next section. We discuss using a matrix transformation to scale the Canvas in both Chapters 2 and 4.

Dynamically resizing in Text Arranger

We will add the ability for the canvas to be resized at will, giving you a good example of how resizing works and what it does to your drawn content.

First, we will add a couple new range controls to the HTML

. As you might have already guessed, we really like this new HTML5 range control, so we’ve tried to find as many uses as possible for it—even though it’s only tangentially related to HTML5 Canvas.

We will give the controls the ids canvasWidth and canvasHeight:

Canvas Width: min="0"

max="1000"

step="1"

value="500"/>

Canvas Height:

min="0"

max="1000"

step="1"

value="300"/>

Next, we add event listeners for the new form elements in the canvasApp() function:

formElement = document.getElementById("canvasWidth");

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

formElement = document.getElementById("canvasHeight");

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

Finally, we add the event handlers. Notice that we set the width and height of theCanvas (the variable we created that represents the Canvas object on screen) right inside these functions. We also need to make sure that we call drawScreen() in each function so that the canvas is redrawn on the newly resized area. If we did not do this, the canvas on the page would blank back to white:

function canvasWidthChanged(e) {

var target = e.target;

theCanvas.width = target.value;

drawScreen();

}

function canvasHeightChanged(e) {

var target = e.target;

theCanvas.height