What you should see are frames with a happy bear in them. The intent is that if you click on the third and fifth one, each frame and drawing should get bigger. If you click on the fourth one the bear should move down. When you exit a frame it goes back to the original state.

What would be more reasonable than to make sure that a vector-based drawing can be easily panned and zoomed? Since several browsers (opera(1), firefox(1), iexplore(1), ...) let me make an image displayed with IMG resize itself very simply, it seemed likely I could do the same with a CANVAS. This example shows how forgiving they all are. The height implicitly rescales, for example.

        <img 
           width="176"
           onclick="this.src=this.src;this.width=this.width+100" 
           ondblclick="this.src=this.src;this.width=176" 
           alt="ZOOMABLE IMAGE" 
           src="globe.jpg" 
        /> 
This HTML snippet means that if you click on the image it will get larger; if you double-click on the image it returns to the original size. ZOOMABLE IMAGE The only "bug" I found was that some browsers ignored the resize unless you "changed" the src= value; thus the odd 'this.src=this.src' string. I have not checked lately to see if that is still necessary.

I thought the same would work with a CANVAS in opera(1) and firefox(1). It did not. As you can see if you have firefox(1), I found something that works in one of them. I had to change the canvas size and then explicitly call a function to redraw the original canvas with a call to scale() that matched the change to the CANVAS size. In opera(1) the canvas area does not change size and the image is redrawn to the same scale without anti-aliasing; so the only thing that happens is that the drawing quality decreases. I'll suggest this but the HTML5 and CSS standards would need to change in concert.
John S. Urban, Fri Jan 25 12:46:19 EST 2008

But doesn't it seem that a CANVAS should naturally have an option to do this? I'd like it to be as easy as a CSS border option that draws a border with L-shaped corners which could be used to re-size the "window". If this border style were selected, simple clicks would zoom the size up and down. Perhaps arrow keys could pan a clipped image. If this image was clipped by the canvas border, the sides of the border frame could show an arrow or diamond shape on the side(s).

 canvas{
   border-style: pan_and_zoom;
}