Javascript 将图像设置为正确适合画布

在第一个示例中，我似乎无法将图像正确地放在画布中，因为有一点被剪切：

在这里，我正确地使用了css，但我似乎无法在第一个示例中实现这一点，因为javascript代码有点偏离了它

//在画布上绘制所有目标
对于（变量i=0；i

 // draw all targets on the canvas
for (var i = 0; i < targets.length; i++) {
    var t = targets[i];
    t.width = t.image.width;
    t.height = t.image.height;
    ctx.drawImage(t.image, t.x, t.y);
}