• Choose a category
• All
• Classic-Fiction

drawScreen();

}

We also need to change the way we draw the background for the application in the drawScreen() function so it supports a resized canvas. We do this by using the width and height attributes of theCanvas to create our background and bounding box:

context.fillStyle = '#ffffaa';

context.fillRect(0, 0, theCanvas.width, theCanvas.height);

//Box

context.strokeStyle = '#000000';

context.strokeRect(5, 5, theCanvas.width−10, theCanvas.height−10);

Dynamically Scaling the Canvas

Besides resizing the canvas using theCanvas.width and theCanvas.height attributes, you can also use CSS styles to change its scale. Unlike resizing, scaling takes the current canvas bitmapped area and resamples it to fit into the size specified by the width and height attributes of the CSS style. For example, to scale the canvas to a 400×400 area, you might use this CSS style:

style = "width: 400px; height:400px"

To update the style.width and style.height properties of the canvas in Text Arranger, we first create two more range controls in the HTML page:

Canvas Style Width: min="0"

max="1000"

step="1"

value="500"/>

Canvas Style Height:

min="0"

max="1000"

step="1"

value="300"/>

Next, we set the event handler for each range control. However, this time we are using the same handler —canvasStyleSizeChanged()—for both:

formElement = document.getElementById("canvasStyleWidth");

formElement.addEventListener("change", canvasStyleSizeChanged, false);

formElement = document.getElementById("canvasStyleHeight");

formElement.addEventListener("change", canvasStyleSizeChanged, false);

In the event handler, we use the document.getElementById() method to get the values from both range controls. We then create a string that represents the style we want to set for the canvas:

"width:" + styleWidth.value + "px; height:" + styleHeight.value +"px;";

Finally, we use the setAttribute() method to set the “style”:

function canvasStyleSizeChanged(e) {

var styleWidth = document.getElementById("canvasStyleWidth");

var styleHeight = document.getElementById("canvasStyleHeight");

var styleValue = "width:" + styleWidth.value + "px; height:" +

styleHeight.value +"px;";

theCanvas.setAttribute("style", styleValue );

drawScreen();

}

NOTE

While trying to change theCanvas.width and theCanvas.height attributes, you might notice some oddities if you try to change the scale with CSS at the same time. It appears that once you change the scale with CSS, the width and height attributes update the canvas in relation to that scale, which might not be the effect you are expecting. Experiment with Text Arranger 3.0 to see how these different styles and attributes interact.

The toDataURL() Method of the Canvas Object

As we briefly explained in Chapter 1, the Canvas object also contains a method named toDataURL(), which returns a string representing the canvas’ image data. A call with no arguments will return a string of image data of MIME type image/png. If you supply the image/jpg as an argument, you can also supply a second argument between the numbers 0.0 and 1.0 that represents the quality/compression level of the image.

We are going to use toDataURL() to output the image data of the canvas into a on our form, and then open a window to display the actual image. This is just a simple way to show that the function is working.<p>The first thing we do is create our last two form controls in HTML for Text Arranger. We start by creating a button with the id of createImageData that, when pressed, will create the image data with a call to an event handler named createImageDataPressed().<p>We also create a <textarea> named imageDataDisplay that will hold the text data of the image after the createImageData button is pressed:<p><input type="button" id="createImageData" value="Create Image Data"><p><br><p><p><br><p><textarea id="imageDataDisplay" rows=10 cols=30>

Next, we set up the event listener for the createImageData