HTML and CSS Reference
In-Depth Information
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
<form>
. 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: <input type="range" id="canvasWidth"
min="0"
max="1000"
step="1"
value="500"/>
<br>
Canvas Height:
<input type="range" id="canvasHeight"
min="0"
max="1000"
step="1"
value="300"/>
<br>
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
the
Canvas
(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 = target.value;
drawScreen();
}
