Нарисуйте изображение внутри холста HTML, используя определенную ширину/высоту

Размер холста задается путем определения свойств ширины и высоты:

<canvas id = "canvas" width = "1200" height = "500"></canvas>

Это размер двумерного контекста, и вы можете рисовать на этом холсте. Всегда в баллах. В противном случае вы можете использовать относительные единицы, например. проценты:

<canvas id = "canvas" style = "width: 100%; height: 100%;"></canvas>

Как рисовать на таком холсте? Как определить, куда поместить изображение? Вот почему существует разница между размером контекста рисования и тем, как разместить холст на веб-странице.

Вы можете установить размер холста 1200x500 и одновременно изменить его размер, чтобы он соответствовал родительскому контейнеру:

<canvas id = "canvas" width = "1200" height = "500" style = "width: 100%; height: 100%;"></canvas>

Надеюсь, это развеет ваши сомнения.

Метод drawImage имеет 9 параметров.

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

Вы можете растянуть изображение до заданных размеров следующим образом:

canvasCtx.drawImage( image, 0, 0, image.width, image.height, 0, 0, 400, 200);

Проверьте https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage для получения дополнительной информации.

Кроме того, вам следует установить ширину и высоту объекта холста для правильного просмотра. Правильный пример кода:

const fileReader = new FileReader();
const {width, height} = document.getElementById('container').getBoundingClientRect();
const canvas = document.getElementById('canvas');
canvas.width = width;
canvas.height = height;
const canvasCtx = document.getElementById('canvas').getContext('2d');

fileReader.onload = function( event ){
    const image = new Image();

    image.onload = function() {
        const ratio = Math.max(image.width/400, image.height/200)
        canvasCtx.drawImage( image, 0, 0, image.width, image.height, 0, 0, image.width/ratio, image.height/ratio);
    };

    image.src = event.target.result;
}

function handleFile() {
    const file = document.querySelector("input[type=file]").files[0];
    fileReader.readAsDataURL( file );
}

html,  body {
    color: #222;
    background: #bbb;
    font: 14px monospace;
    user-select: none;
}

canvas {
   background: #fff;
}

<div>
    <input type = "file" accept = "image/*" onchange = "handleFile()"/>
    <div id = "container" style = "width: 1200px; height: 500px;">
      <canvas id = "canvas"></canvas>
    </div>
</div>