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.
Sure, you can use two basic ways:
Draw everything to canvas even if parts of it is outside the visible area and use translate to pan around
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.
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).