Javascript 带有大图像的画布drawImage

我想做的是一种可滚动的视口，其中加载了一个非常大的图像（如10.000 x 10.000像素或更多），我应该能够在这个图像上绘制一些线条/形状

我可以想到两种方法来绘制图像/允许绘制形状：

• 使用标记绘制图像，并在其上方绘制图像大小的画布
• 使用drawImage（）方法绘制图像，只需使用画布即可

我尝试过这两种情况，但当我加载一个图像（在img标记中或使用javascript image（）对象）时，它会消耗大约500MB的内存

我想知道是否有更有效的方法来实现这一点。

永远不要让用户下载这样大小的图像，除非你必须下载

---

制作100个较小的图像平铺（或大约100个），并将平铺绘制到画布上，仅绘制当前可以看到的平铺（如谷歌地图等）。

将图像拆分为平铺，并仅在靠近它们滚动时加载平铺怎么样？谢谢！我已经做了一个小的测试项目，平铺是一种方式。