21

I am drawing graphs on canvases which have large unequal widths. Is it possible for each canvas to have its own scrollbar? I tried to put all the canvases in one div and specify a max-width but it didn't work. Is it possible for all the canvases to be say 500px in visible width on the page and each has its scrollbar to view the entire width of the canvas.

Thank you.

madu
  • 5,232
  • 14
  • 56
  • 96

1 Answers1

41

Specify the total width of the canvas then wrap it in a div. Set the div to overflow: scroll and give that the 500px width. You should then have scrollbars allowing you to scroll and see the hidden parts of the canvas. Repeat this for all of the canvases.

<div style="max-height: 256px;max-width:256px;overflow: scroll;">
          <canvas height="512px" width="512px"></canvas>
</div>
Mauricio Gracia Gutierrez
  • 10,288
  • 6
  • 68
  • 99
James Coyle
  • 9,922
  • 1
  • 40
  • 48
  • 1
    But i assume this creates a canvas backing store bitmap of the full size. Not acceptable for most use cases. – Lothar Jan 23 '17 at 09:53
  • Its acceptable for any use case which doesn't require the canvas to animate. If you are generating a graph or large image it should be perfectly fine to load into a canvas once and have scrollbars. If you are creating an animation you probably want to just draw the part of the animation that is visible to save processing time. – James Coyle Feb 18 '17 at 14:14