Рисунок на холсте с изображением

Question

У меня есть элемент видео, воспроизводящий видео в формате mp4. При нажатии на кнопку скриншота, она рисует текущий видеокадр на холсте. Затем я хотел бы нарисовать поверх холста.

Моя проблема в том, что я не могу заставить курсор выровняться с координатами чертежа. У меня есть подозрение, что это связано с тем, как я устанавливаю высоту и ширину холста, чтобы правильно рисовать видеокадр.

Минимальное воспроизведение: https://codepen.io/stiba/pen/KEBRdy

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var video = document.getElementById('vid');
canvas.addEventListener('mousedown', mouseDown);
canvas.addEventListener('mouseup', mouseUp);
canvas.addEventListener('mousemove', mouseMove);

var isDrawing = false;
var prevX = 0;
var prevY = 0;
var currX = 0;
var currY = 0;

function buttonClick() {
  console.log('Clicked!');
  var height = video.videoHeight;
  var width = video.videoWidth;
  canvas.width = width;
  canvas.height = height;
  ctx.fillRect(0, 0, width, height);
  ctx.drawImage(video, 0, 0, width, height);
}

function setCoordinates(e) {
  prevX = currX;
  prevY = currY;

  var boundingClientRect = e.target.getBoundingClientRect();
  var left = boundingClientRect.left;
  var top = boundingClientRect.top;

  currX = e.clientX - left;
  currY = e.clientY - top;
}

function mouseDown(e) {
  setCoordinates(e);
  isDrawing = true;
}

function mouseUp(e) {
  isDrawing = false;
}

function mouseMove(e) {
  if (!isDrawing) {
    return;
  }

  setCoordinates(e);
  draw();
}

function draw() {
    ctx.beginPath();
    ctx.moveTo(prevX, prevY);
    ctx.lineTo(currX, currY);
    ctx.strokeStyle = "red";
    ctx.lineWidth = 2;
    ctx.stroke();
    ctx.closePath();
}

Answer 1

Удаление стилей CSS с вашего холста решит проблему. Если вам нужно, чтобы ваш холст был больше, используйте свойства canvas.width и canvas.height. Использование css для управления размером холста только увеличит размер элемента html, но не поверхность рисования (пиксели).

CSS для удаления:

 flex: 1;
 width: 100%;