Получить ограничивающий прямоугольник клиента без границ

Я создал функцию, которая преобразует координаты мыши в пиксельные координаты холста:

/* Returns pixel coordinates according to the pixel that under the mouse cursor**/
HTMLCanvasElement.prototype.relativeCoords = function(event) {
  var x,y;
  //This is the current screen rectangle of canvas
  var rect = this.getBoundingClientRect();

  //Recalculate mouse offsets to relative offsets
  x = event.clientX - rect.left;
  y = event.clientY - rect.top;
  //Also recalculate offsets of canvas is stretched
  var width = rect.right - rect.left;
  //I use this to reduce number of calculations for images that have normal size 
  if(this.width!=width) {
    var height = rect.bottom - rect.top;
    //changes coordinates by ratio
    x = x*(this.width/width);
    y = y*(this.height/height);
  } 
  //Return as an array
  return [x,y];
}

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

Как я могу вычесть ширину границы из прямоугольника? Производительность имеет значение, так как этот расчет часто выполняется во время событий перемещения мыши.

Ответ 1