Create javascript buttons that increments a variable so user can effectively scale the page

I am trying to cre开发者_如何学Goate three buttons that will scale the page up, down, or reset to a default value. I would like to base that incrementing on a global variable declared in javascript:

var canvasWidth = 600;

Desired incrementing would be in sets of 200, so that when the user clicks zoom in once, the value is 800 and the page is redrawn, twice to 1000, and so on.

All of the visual elements of the page are created in javascript and are sized based on this variable. Very little is done on the HTML page visually, except for a little display organization, so if possible I'd like to be able to complete this task mainly in the javascript file.

Does this make sense?

---

The trivial answer is:

<button onclick="canvasWidth=(canvasWidth||0) + 200; resize();"...>Increase scale</button>
<button onclick="canvasWidth=(canvasWidth||0) - 200; resize();"...>Decrease scale</button>
<button onclick="canvasWidth=600; resize();"...>Reset scale</button>

I don't know whether you are trying to scale the canvas element or its content.

---

As far as I know,

If u can do every visualization in client side, that's is the great benefits and every user would want like this. If your page don't need to connect with database or doing serverside calcualation, I would encourage to use everything in JS.

Cheers!!