0

I need to draw a rather large diagram ('diagram' might be misleading, as it'll have loads of small text and colour boxes, but for lack of a better term, I'll leave it at that), with the x-axis many times longer than the width of the screen, and was wondering how to approach this to get the best performance.

a) I draw a large canvas inside an smaller div, so that scrollbars appear. That way, only part of the canvas would be visible. If browsers are smart enough only to render the part of the canvas that is being displayed, that would be the easiest option.

b) I draw a smaller canvas with custom scrollbars and rerender the contents of the canvas when the user scrolls. If my code is smart, I am sure I can save some rendering cycles.

So I guess my question is: Are browsers smart enough to figure out that they have to render only the truly visible part of a canvas? Or am I better of to rerender the part of the canvas that is supposed to be visible?

lordvlad
  • 5,200
  • 1
  • 24
  • 44
  • I recommended implementing the scrolling in the canvas itself, not scrolling a large canvas. And, to answer your question: http://stackoverflow.com/questions/9820176/do-browsers-render-canvas-elements-that-are-not-inside-the-viewport – XCS Nov 08 '14 at 12:15
  • @Cristy thanks, I've actually read that thread, but I thought my question is slightly different since I'm asking about PARTS of a canvas that should be visible. Can you formulate any reasoning behind your advice? Experience? – lordvlad Nov 08 '14 at 12:19
  • Does it have to be a canvas? For a diagram maybe SVG might be a better choice … – CBroe Nov 08 '14 at 12:24
  • hm maybe 'diagram' is a little misleading. It'll have lots of text and colour boxes. I figured it would be easier to draw that to a canvas than have thousands of SVG elements. – lordvlad Nov 08 '14 at 12:30
  • By "performance" do you mean speed, memory usage, processor usage or something else? The likely answer to your question is a tradeoff between speed vs resources. If you want more speed you will require more resources (memory+processing). For example, if your device has a GPU and your full canvas plus other webpage elements will fit in the available GPU memory then your rendering is very fast because rendering is reduced to copying an array of pixels from memory into a GPU layer. Otherwise, you will be burning memory and processing to gain speed. Bottom line: test against multiple devices. – markE Nov 08 '14 at 17:02

0 Answers0