Canvas size error drawImage

Question

Im using two html canvases, fronendCanvas is visible to users and is part of the html DOM tree and has 100% window width and height, the backendCanvas is created in javascript code and used to contain a huge chart that I need to draw.

/** FrontendCanvas */ // HTML <canvas id="canvas"></canvas> // JavaScript frontCanvas.width = window.innerWidth; frontCanvas.height = window.innerHeight; // CSS #canvas { display: block; background-color: #dddddd; } /** BackendCanvas */ // JavaScript backCanvas = document.createElement('canvas'); backCanvas.width = diagram.maxX; backCanvas.height = diagram.maxY; 

Basically, in order to have smooth rendering, the frontendCanvas shows only part of the huge image drawn in the backendCanvas using the drawImage function (the user can use the mouse to drag the visualization area along the diagram, see the example Move HTML5 canvas with a background image ).

 frontCanvas.getContext('2d').drawImage( backCanvas, (-ix - offsetX), (-iy - offsetY), (frontCanvas.width), (frontCanvas.height), 0, 0, (frontCanvas.width), (frontCanvas.height) ); 

When I set the width and height of the backendCanvas to 15000, everything works fine, but when I set it to the size that I really need, the width is 62322 and the height is 50946, somehow drawImage no longer works and gives a size error:

 IndexSizeError: Index or size is negative or greater than the allowed amount (frontCanvas.height) 

I assume Im will reach the maximum size of the canvas and reset it, but this is not like that because:

• the link to the canvas says that the width and height of the canvas is unsigned length, so it’s much more than the numbers I mentioned;

• I checked the size of the backendCanvas right before the call to the drawImage function, and that is correct.

Any help would be greatly appreciated!

Thanks.

Answer 1

Oo, these sizes (62322 x 50946) are beyond what you can use with canvas - even in 2013. :: -)

The maximum current supported size in major browsers varies from 6 to 15,000 points depending on the implementation (only a few months ago, only 6-8000). This is due to a real need with most methods, as well as hardware acceleration, memory, etc.

The raw image size you want to use is 11.83 GB (RGB + alpha, since the canvas uses only RGBA). In addition, you will need to save the original image somewhere in memory before you can draw it on the canvas, which means that you use 23-bit memory even before the fun begins. This will force paging on most computers, which will make everything very slow.

What you need to implement here is the striping / caching / buffering technique (think Google maps - that’s why they split their cards).

The description of this is perhaps too large for this Q & A site, so I can also suggest you look, for example, PanJS3 or Leaflet . Disclaimer: I do not know these libraries, but you can at least study them to see how they work with large images / maps.