Как отрисовать чёткое изображение из видео-элемента на канвас?

Question

[historydev]

В гугле только imageSmoothingEnabled, но толку от него 0 в моём случае, картинка берётся из видео-элемента, в видео элемент поступает поток с камеры, код ниже отрабатывает по клику для фото.

Как исправить тотальное мыло?

let ctx = canvas.getContext("2d");

    let scale_factor = Math.min(canvas.width / video.videoWidth, canvas.height / video.videoHeight);

    let newWidth = video.videoWidth * scale_factor;
    let newHeight = video.videoHeight * scale_factor;

    ctx.drawImage(video, 0, 0, newWidth, newHeight);

Comments

[Александр]

Ширина и высота канваса где устанавливается?

[historydev]

Александр, пробовал и здесь, и в css, разницы нет, сейчас оставил в css

[historydev]

Александр,
А нет, разница есть, изображение 1 в 1 вставляется, но это уже другое:

canvas.width = newWidth;
    canvas.height = newHeight;

[RAX7]

Владимир, так пробовал https://web.dev/canvas-hidipi/ ?

[historydev]

RAX7, эффект тот-же что и без изменения размера, нужно именно на всю область картинку растянуть без потери качества, чтобы было как на телефонной камере

[Александр]

Владимир, Лучше выставить размеры до расчета scale_factor. Можете юзать innerWidth/innerHeight или screen.availWidth/screen.availHeight.

[historydev]

Александр, попробую