Get Bounding Client Rectangle Without Borders

I made a function that transforms mouse coordinates to canvas pixel coordinates: /* Returns pixel coordinates according to the pixel that's under the mouse cursor**/ HTMLCanvasElem

Solution 1:

getComputedStyle contains the information you desire:

Fetch the border information once at the beginning of your app after the canvas border has been set.

// get a reference to the canvas elementvar canvas=document.getElementById('yourCanvasId');

// get its computed stylevar styling=getComputedStyle(canvas,null);

// fetch the 4 border width valuesvar topBorder=styling.getPropertyValue('border-top-width');
var rightBorder=styling.getPropertyValue('border-right-width');
var bottomBorder=styling.getPropertyValue('border-bottom-width');
var leftBorder=styling.getPropertyValue('border-left-width');

If you scope these border-width variables app-wide, you can use these prefetched variables in your HTMLCanvasElement.prototype.relativeCoords.

Good luck with your project!