html - Canvas drawImage size error -

i’m using 2 html canvas, fronendcanvas visible users , part of html dom tree , set have 100% of window width , height, backendcanvas created on javascript code , used contain huge diagram need 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, have smooth visualisation frontendcanvas shows part of huge image drawn in backendcanvas using drawimage function (user can use mouse drag visualisation area across diagram, see example move html5 canvas background image).

frontcanvas.getcontext('2d').drawimage(     backcanvas,     (-ix - offsetx),     (-iy - offsety),     (frontcanvas.width),     (frontcanvas.height),     0,     0,     (frontcanvas.width),     (frontcanvas.height) ); 

when set backendcanvas width , height 15000 works fine, when set size need, width 62322 , height 50946, somehow drawimage doesn’t work more , throws size error:

indexsizeerror: index or size negative or greater allowed amount (frontcanvas.height) 

my guess i’m reaching maximum size of canvas , it’s reseted, doesn’t seem case because:

1. the canvas reference says canvas width , height limit unsigned long, therefore bigger numbers mentioned;

2. i checked size of backendcanvas right before drawimage function call , correct.

any appreciated!

thanks.

oo, sizes (62322 x 50946) way outside can use canvas - in 2013. ::-)

the max current supported size in major browsers vary between 6-15000 points depending on implementation (a few months 6-8000). related actual need techniques hardware acceleration, memory etc.

the raw size of image want use 11.83 gb (rgb + alpha canvas uses rgba only). in addition have store source image somewhere in memory before can paint canvas means in 23+ gb memory usage before fun begin. force paging on computers make slow.

what need implement here tiling/caching/buffering technique (think google maps - why tile maps).

describing perhaps bit broad q&a site can suggest @ example panjs3 or leaflet. disclaimer: don't know these libraries can @ least study them see how deal large images/maps.