Problems with memory consuming while canvas operations (fillRect() etc.)

Hello at all,

I have an application written with GWT which looks a little bit like a Gantt chart. It works well but sometimes I have some problems with the memory usage of the application.. To paint the chart I use one big canvas, for example width 10000 px and height 2500 px. When I paint my chart initially everything is fine (memory usage JavaScript in Chrome 50 MB, memory usage over all in Chrome 150 MB (from Chrome task manager)).
The problem starts with repainting some parts of the chart, for example it is possible to select something, that means the clicked rect should get another color. In that case I repaint everything new which intersects with my rect, for example 5 other rects with a size of 40 x 10 px overall. And this is really memory consuming, JavaScript memory usage is nearly fixed but the memory usage over all increases by some 100 MB. Why that? If my canvas is smaller, for example 1500 x 1000 px and I do th same operation the memory usage increases also but only for 50 MB.
That's why I think the problem has nothing to do with my coding in JavaScript/GWT, it has something to do how chromes handles the painting on the canvas. Is there a possibilty to see, what consumes all the memory? With the Chrome dev tools I can only see all the JavaScript stuff. But the memory usage of JavaScript is nearly fixed. I read something about the trace tool inside chrome. But this is really hard to understand if you have no knowledge about the internals of chrome. What else could be the reason for the memory usage?
If it is the repainting on the canvas, what should I do? I read something about canvas/rendering strategies:

1. background rendering (create a second canvas of the size of changes, paint all changes on this canvas and place this one in the original, big one)
2. multi canvas (create a second canvas of the size of changes, paint all changes on this canvas and place this canvas on the right position on top of the orignal, big one as a second canvas in the html page),
3. one canvas which fits to the screen size and you paint only a small view of the hole chart and when you "scroll" you have to repaint the missing parts (I think the chrome trace tool works like this, does'nt it?)

1. would be quite easy to implement it in my application, 2. is a little bit more complicated and 3. is quite difficult. Would one of the strategies solve my problem? If it is strategy c), what is the best way to implement it? Is there any support from the GWT framework or HTML5/canvas itself? What's about the usage of a scroll panel, because the canvas has a fixed size? How the trace tool does it?

Thanks a lot, Philipp

--
You received this message because you are subscribed to the Google Groups "GWT Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsubscribe@googlegroups.com.
To post to this group, send email to google-web-toolkit@googlegroups.com.
Visit this group at https://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/d/optout.