HTML5 large canvas - moving and zooming whole content including background

Question

My final is goal to implement a app like http://www.crystal.ch/abb/power_systems_landscape/ using html5.

As you see, we may need a large(2000*600) canvas, but im not sure.

Can anyone give me idea just for following behavior of above link ?

1. whole canvas content including background can move left-right smoothly using mousemove and mousedown operation
2. whole canvas content including background move left-right smoothly according to power system selection
3. Zoom in zoom out
4. Fade out effect like plus iconic circles

Any kind of idea would be appreciated.

Answer 1

basically you want something like this

<div id='wrapper' style='position: overflow: hidden; relative; width: 500px; height: 300px;>
    <canvas id='canvas' width='2000' height='600'></canvas>
<div>

then when you want to scroll you would do something like

document.getElementById('wrapper').scrollTo(x, y);

and zooming would be

document.getElementById('canvas').style.width = 2000 * zoom;
document.getElementById('canvas').style.height = 600 * zoom;

You can play around with setInterval and what not to get the scrolling and zooming nice and smooth, but that's definitely be the fastest way to get those effect on a large canvas since there's no redrawing involved.