views:

779

answers:

2
+1  A: 

Most browsers that implement HTML5 are still in early beta - so it's quite likely they are still working the bugs out.

However, the resolution of the canvas you are trying to create is very high .. much higher than what most people's monitors can even display. Is there are reason you need it quite so large? Why not restrict the draggable area to something more in line with typical display resolutions?

LBushkin
It's inside of a div that has overflow:hidden, and within javascript you can hold and drag the contents of that div around (basically setting the top and left attributes) so you can view parts of it within that viewport.
Steve
+4  A: 

That is an enormous sized canvas. 6400 x 6400 x 4 bytes per pixel is 156 MB, and your implementation may need to allocate two or more buffers of that size, for double buffering, or need to allocate video memory of that size as well. It's going to take a while to allocate and clear all that memory, and you may not be guaranteed to succeed at such an allocation. Is there a reason you need such an enormous canvas? You could instead try sizing your canvas to be only as large as necessary to draw the line between those two divs, or you could try using SVG instead of a canvas.

Another possibility would be to try dividing your canvas up into large tiles, and only rendering those tiles that are actually visible on the screen. Google Maps does this with images, to only load images for the portion of the map that is currently visible (plus some extra one each side of the screen to make sure that when you scroll you won't need to wait for it to render), maintaining an illusion that there is an enormous canvas while really only rendering something a bit bigger than the window.

Brian Campbell
It's for rendering a randomly generated map that's 100x100 in size with each cell being 64x64 (think of a starmap where the stars are connected via starlanes), another approach that I was tempted to go with was to create a canvas per link (line) needed, I just thought that it would be alot slower due to alot more insertions into the dom.Originally I went with the javascript drawing library wz_jsgraphics, however that made scrolling very slow due to the nature of how that renders the lines.
Steve
I also never realised the memory requirements for doing this, which does indeed make it unfeasible. I'll have to look into doing this dynamically with SVG, thank you!
Steve