Html 画布图像大小错误

我使用两个html画布，fronendCanvas对用户可见，是html DOM树的一部分，设置为100%的窗口宽度和高度，backendCanvas在javascript代码上创建，用于包含我需要绘制的巨大图表

/** 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;

当我将backendCanvas的宽度和高度设置为15000时，一切正常，但当我将其设置为实际需要的大小（宽度62322和高度50946）时，drawImage不知何故不再工作，并抛出大小错误：

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

我的猜测是，我正在达到画布的最大尺寸，并且它已重置，但情况似乎并非如此，因为：

canvas参考说canvas的宽度和高度限制是一个无符号的长，因此比我提到的数字要大得多

在调用drawImage函数之前，我检查了backendCanvas的大小，结果是正确的

任何帮助都将不胜感激

谢谢。

Oo，这些尺寸（62322 x 50946）远远超出了canvas的使用范围，即使在2013年也是如此。：-）

主要浏览器当前支持的最大大小在6-15000点之间变化，具体取决于实现（几个月前仅为6-8000）。它与大多数技术以及硬件加速、内存等的实际需要有关

要使用的图像的原始大小为11.83 GB（RGB+alpha作为画布仅使用RGBA）。此外，您必须先将源图像存储在内存中的某个位置，然后才能将其绘制到画布上，这意味着您甚至在游戏开始之前就已经占用了23+GB的内存。这将迫使大多数计算机进行分页，这将使一切都变得非常缓慢

这里需要实现的是平铺/缓存/缓冲技术（想想谷歌地图——这就是他们平铺地图的原因）

---

对于这个问答网站来说，描述这一点可能有点太宽泛了，所以我也可以建议您看看例如或。免责声明：我不知道这些库，但您至少可以研究它们，看看它们如何处理大型图像/地图。

上次我查看时，最大画布元素大小远低于50946（我模糊地记得Chrome的最大允许大小为32K+）。无论如何，只需通过增加context.rect的大小来测试它，直到出现错误为止。还有，一些数学计算：62322x50946x4字节/像素需要12GB+内存。例如，我在这里看到（）宽度和高度的最大值是一个无符号长，但实际上，您的计算非常合理。因此，基本上我所做的是不可行的…也许我应该做的是，如果可见，则绘制，并在用户每次平移屏幕时调用它。非常感谢你的回复。事实上，我现在才意识到这太大了。幸运的是，我要画的是一个网络，我以非常简单和轻松的格式存储。基本上，我使用了与here（）类似的方法，但我没有在backgroundCanvas中绘制所有网络，而是在frontendCanvas中绘制文件中直接可见的元素之前进行检查。通过这种方式，我可以通过稍微调整平移功能来显示整个网络。非常感谢大家，特别是你肯。

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