Display some part of plot in canvas and scroll through rest of plot

I am trying to create a plot which is larger than canvas size. So is there a way I can create the plot and show only part of it in the canvas viewing area.

To view the remaining plot a scroll bar should be there which will bring the plot into viewing area.

Any hint is also welcome.

Answers


Sure, you can use two basic ways:

  1. Draw everything to canvas even if parts of it is outside the visible area and use translate to pan around

  2. Collect the lines/shapes that would be visible fully or in part and only show those. Use an internal translate to add to the points when you check.

The first method is simple and it works. If you have a lot of points it is not the most efficient. It is not so much affected by the canvas clipping the graphics but that you would need to execute all the JavaScript code even for the invisible parts.

You "pan" the points by translating the canvas and then (clear and) redraw. Canvas will do all the necessary clipping for you (if your points would result in a very large are you could do a crude clipping of those points, look at for example quad-trees).

The second is more efficient in the sense it reduces draw operations, but add a cost in finding out which shapes you need to draw. But it can also be more complex depending on what kind of shapes you're using, for example lines need to continue in the correct direction even if one end point is outside etc. so your algorithm needs to consider these sort of situations as well.

If you don't have a gazillion of entries then I would start with the first and progress to 2. if needed. If you do have a "gazillion" of entries then you would need a more complex buffering system which would be out of scope for this answer.

Instead of a scrollbar (or in addition to one) you could use mouse/touch drag. Canvas does not support scrollbars for its (bitmap) content so you would have to create one yourself (I would not recommend using a giant canvas and scroll that inside a div as this have a huge memory impact and will affect performance etc. on mobile devices).


Need Your Help

is SHA-512 collision resistant?

cryptography collision sha sha512

According to the books that i have read, it says that S.H.A(Secure Hash Algorithm) is collision resistant.But if the input space is a 1024 bit number and the output space is a 512 bit message diges...