The HTML5 Canvas Text API - HTML5 Canvas - page 190

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 var theCanvas = document . getElementById ( "canvasOne" );

var

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 propertyofthe Canvas object tocenter textonthecanvas.However,the Canvas object
also includes another property named height , and both of these properties can be used to dy-
namically resize the Canvas object on demand. Why would you want to do this? There could
be many uses, including the following:

▪ 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 prop-
erties 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,youneedtousetheCSS width and height attributes,asdescribedinthenextsection.
Wediscussusingamatrixtransformation toscalethecanvasinboth Chapter 2 and Chapter 4 .

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
alreadyguessed,wereallylikethisnewHTML5 range control,sowe'vetriedtofindasmany
uses as possible for it—even though it's only tangentially related to HTML5 Canvas.

We will give the controls the id s canvasWidth and canvasHeight :