Viewing Multiple Dynamic Canvases

I'm generating multiple canvases and arranging them on different parts of the screen. Each canvas either has a drawing (done using javascript) or text (done using html) on it, likely too small to see. I am using Shadowbox so that a user can click on a particular canvas and see an expanded view.

My problem is making the canvases in such a way that they can be zoomed into with Shadowbox. Because these canvases are dynamically drawn (what's drawn is based on user input), they aren't images. It seems like the best way to handle this is to create temporary images that are displayed at a smaller size in the canvas and then displayed at full size in the Shadowbox.

Is creating temporary images of canvases the best approach? Or is there a better way usin开发者_运维百科g HTML5 and/or Shadowbox? I don't know much about HTML5/drawing with javascript/Shadowbox, so advice would be appreciated.

If you want to draw something smaller on the canvas, all you have to do is use

context.scale(x, y)

The initial scale is 1,1. Setting the scale to 0.5, 0.5 will make everything drawn smaller.

All your drawing code can stay the same, it will just appear smaller.

You'll want to read up on all the canvas context transformations and how to use them. The Mozilla tutorial is pretty good:

https://developer.mozilla.org/en/Canvas_tutorial/Transformations