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

В моем JS-файле у меня есть слушатель, который наблюдает за окном и изменяет размеры холста через свойства .width и .height элемента canvas, чтобы они точно соответствовали ширине и высоте видео.

Для прямоугольного кода выбора JS я следую скрипке из первого ответа на этот вопрос StackOverflow:рисование прямоугольника с помощью мыши и перетаскивания - JavaScriptОднако по какой-то причинекогда пользователь прокручивается вниз на странице рисование на холсте полностью искажается, и прямоугольники начинают рисоваться довольно далеко от мыши. Однако когда пользователь находится вверху страницы, прямоугольник рисует в правильном положении. Почему это случилось?

Ниже приведен фрагмент кода JS, который я использую:

  
// Happens on mousedown event
  downCanvas: function(e) {
    $('.label-grid-canvas').css('cursor','crosshair');
    this.isDrawing = true
    this.startX = parseInt(e.clientX - this.offsetX);
    this.startY = parseInt(e.clientY - this.offsetY);
  },
  
// Happens on mouseup event
  upCanvas: function(e) {
    this.isDrawing = false;
    $('.label-grid-canvas').css('cursor','default');
  },
  // Happens on mousemove event
  moveCanvas: function(e) {
    if (this.isDrawing) {
      var mouseX = parseInt(e.clientX - this.offsetX);
      var mouseY = parseInt(e.clientY - this.offsetY);

      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
      this.ctx.beginPath();
      this.ctx.rect(this.startX, this.startY, mouseX - this.startX, mouseY - this.startY);
      this.ctx.stroke();
    }
  },

  resizeCanvas: function() {
    this.canvas.width = $('#video-canvas')[0].offsetWidth;
    this.canvas.height = $('#video-canvas')[0].offsetHeight;

    this.canvasOffset = $('.label-grid-canvas').offset();
    this.offsetX = this.canvasOffset.left;
    this.offsetY = this.canvasOffset.top;

    this.redraw();
  },

  redraw: function() {
    this.ctx.strokeStyle = 'blue';
    this.ctx.lineWidth = '2';
    this.ctx.strokeRect(0, 0, $('#video-canvas')[0].offsetWidth,
        $('#video-canvas')[0].offsetHeight);
  },

// Happens after page-load
  initialize: function(options) {
    this.canvas = document.getElementById('label-grid-canvas');
    this.isDrawing = false;
    this.ctx = this.canvas.getContext('2d');
    this.startX;
    this.startY;
    this.canvasOffset = $('.label-grid-canvas').offset();
    this.offsetX = this.canvasOffset.left;
    this.offsetY = this.canvasOffset.top;
    $(window).on('resize', _.bind(this.resizeCanvas, this));
 ....
}

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