Javascript 如何使画布等待图像加载

我正在通过RESTAPI将图像加载到前端。现在我想借助坐标在图像上标记特定区域。我唯一的想法是在画布上绘制图像，并在更高级别的画布上绘制标记区域。每次我加载图片时，它都会以不同的较小尺寸绘制在画布上。我认为这与图像完全加载之前的画布绘制有关，但我还没有弄清楚如何让它工作

let canvas = document.getElementById('c');
let ctx = canvas.getContext('2d');
let canover = document.getElementById('cover');
let ctxover = canvas.getContext('2d');

let img = new Image();
img.onload = function () {
    ctx.drawImage(img, 0, 0);
    ctxover.fillRect(0,0,10,10);
    ctxover.fillRect(0,20,10,10);
    ctxover.fillRect(20,0,10,10);
    ctxover.fillRect(20,20,10,10);
}
canvas.width = img.width;
canvas.height = img.height;
canover.width = img.width;
canover.height = img.height;

---

我看了一下img.height和img.width，它们经常是错误的。因此，我正在寻找一种简单的方法，只有在图像完全加载后才能开始绘制。我曾尝试使用fetch获取图像，然后绘制图像，但无法正确绘制。

您似乎在执行onload处理程序之前设置画布尺寸。尝试将画布维度设置为onload处理程序中的images维度