JSFiddle - React, Tailwind, and code Playground

HTML

<body style="margin: 0em; background: blue;">
        <div style="border: 40px solid green; position: absolute; left: 30px; top: 30px; background: white;">
            <canvas id="c" width="640" height="360" style="border: 60px solid red; position: relative; left: 50px; top: 50px; padding: 5em;background: brown;"></canvas>

        </div>
</div>

JavaScript

var c = document.getElementById('c');
            var t = c.getContext('2d');
            t.font = '10px monospace';
            c.addEventListener('mousemove', function(e) {
                t.fillStyle = "white"
                t.fillRect(0, 0, c.width, c.height);
                t.fillStyle = "black"
                var style = getComputedStyle(c,null) ;
                var borderTop = style.getPropertyValue("border-top-width") ;
                var borderLeft = style.getPropertyValue("border-left-width") ;
                t.fillText('borderTop:  ' + borderTop, 16, 16);
                t.fillText('borderLeft: ' + borderLeft, 16, 32);
                var paddingTop = style.getPropertyValue("padding-top") ;
                var paddingLeft = style.getPropertyValue("padding-left") ;
                t.fillText('paddingTop: ' + paddingTop, 16, 48);
                t.fillText('paddingLeft:' + paddingLeft, 16, 64);
                var offsetX = e.offsetX || e.layerX || 0 ;
                var offsetY = e.offsetY || e.layerY || 0; 
                t.fillText('offsetX:   ' + offsetX, 16, 80);
                t.fillText('offsetY:   ' + offsetY, 16, 96);
                var x = offsetX ;
                var y = offsetY ;
                if(window.navigator.userAgent.indexOf("Opera") === -1){ 
                  x -= parseInt(paddingLeft,10) ;
                  y -= parseInt(paddingTop,10) ;
                  if(window.navigator.userAgent.indexOf("MSIE") === -1){
                     x -= parseInt(borderLeft,10)  ;
                     y -= parseInt(borderTop,10)  ;    
                  }

                }
                t.fillText('canvas x:   ' + x, 16, 112);
                t.fillText('canvas y:   ' + y, 16, 128);
                var j = 0, n = c;
                do {
                    t.fillText(n.toString() + ': ' + n.offsetLeft + ', ' + n.offsetTop, 16, 128 + (++j) * 16);
                } while (n = n.offsetParent);
            }, false);