Distorção de tela HTML5

Estou tentando incluir um elemento de tela em um vídeo de tamanho dinâmico que será carregado de forma assíncrona. Na tela, o usuário poderá arrastar e redimensionar uma caixa de seleção de retângulo.

No meu arquivo JS, tenho um ouvinte observando a janela e redimensionando a tela através das propriedades .width e .height do elemento de tela para ter a largura e a altura exatas do vídeo.

Para o código de seleção retangular JS, estou seguindo o violino da primeira resposta a esta pergunta do StackOverflow:desenhando um retângulo com o mouse, clique e arraste - javascript, no entanto, por algum motivo,quando o usuário é rolado para baixo na página o desenho na tela é completamente distorcido e os retângulos começam a ser desenhados bem longe do mouse. Quando o usuário está no topo da página, o retângulo é desenhado na posição correta. Por que isso aconteceria?

Abaixo estão alguns dos códigos JS que estou usando:

  
// 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));
 ....
}

Por favor, desconsidere as ineficiências. Estou apenas tentando invadir uma coisa que funciona antes de limpá-la.