js怎么实现游戏中的小地图？

Question

我目前能想到的方案是通过画图功能的缩放方法来实现。但效果很不理想。
比如我定义了一张10001000数量格子的地图，每格宽高为50px。正常比例显示还好，当使用缩放方法缩小到能显示全图时，页面就无比卡顿。可能是绘画的资源太大了吗？
我猜测即使我代码中遍历循环绘画出所有格子，但浏览器并没有真正去画出，而是只画出了要展示给我的格子。当我缩放之后，浏览器就需要画出全部的格子，10001000的数量可能太大了，导致卡死。
显然，我这样去实现小地图功能是不合理的。请问游戏中的小地图是怎样实现的呢？