将图像放入HTML画布（适合宽度和高度）

Question

我有这个HTML代码：

<div>
    <canvas id="canvas">
    </canvas>
    <img id="canvasimg" src="{{ $photo }}" style="display:none;"/>
</div>

而且我有这个JavaScript可以将图像绘制到HTML Canvas中：

<script>
    var canvas = document.getElementById('canvas');
    ctx = canvas.getContext('2d');

    var deviceWidth = window.innerWidth;;

    canvasWidth = deviceWidth - 40;
    canvasHeight = deviceWidth - 40;

    canvas.width = canvasWidth;
    canvas.height = canvasHeight;

    var img = document.getElementById('canvasimg');

    imgx = 0;
    imgy = 0;

    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(img, imgx, imgy); 
</script>

问题是当我将此页面加载到宽屏中时，它还会产生更宽的画布。而图像具有固定的宽度和高度。

如何对图像进行分割，使其完美地填充画布？

Answer 1

将dWidth和dHeight参数用于drawImage函数（MDN）。

ctx.drawImage(img, imgx, imgy, canvas.width, canvas.height);