CODEWITHSUNDEEP
javascripthtmlcsshtml5-canvas
Shahdat
Shahdat

Reputation: 5483

HTML5 large canvas - moving and zooming whole content including background

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.

Upvotes: 6

Views: 4437

Answers (2)

Nikola Lukic
Nikola Lukic

Reputation: 4244

I recommend if you are working in 2D canvas js, that does not utilize zoom or move the canvas element, or any other html elements, you better write an algorithm within the draw function. Zoom is the death of quality and speed and can be complex from zoomin to zoomout (Don't forget all visible data on canvas is just a image). I managed to upload a picture of 13000 px and multiplayer avatars to show all of an algorithm within the draw/update functions.

If you use 2 canvas you can crop from code big images and then composite to the visual map.

  If you have too much image width > 3000 ps must be divided by lower level (on iOS devices for image ~> 3000px comes to be negative scale - image comes smaller ).

Upvotes: 0

hobberwickey
hobberwickey

Reputation: 6414

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.

Upvotes: 3

Related Questions