JSFiddle - React, Tailwind, and code Playground

by Darby Rathbone

HTML

<span id='inputouter'><div id='input' contenteditable=true></div>
<br/>
<canvas></canvas>
</span>

CSS

#input[contenteditable=true] {


    outline:2px inset #cccccc;


    min-width:300px;


    max-width:300px;


    min-height:40px;


    max-height:40px;


    text-overflow:wrap;


    display:inline-block;


    overflow-y:scroll;


}


canvas {


    top:0px;


    left:0px;


    right:0px;


    bottom:0px;


    position:absolute;


    pointer-events:none;


    outline:2px dashed #ff0000;


}

JavaScript

var input = document.getElementById('input'),
    canvas = document.getElementsByTagName('canvas')[0],
    previous;
input.addEventListener('input', function (e) {
    input.rect = input.getBoundingClientRect();
    /*  canvas.style.top = input.rect.top + 'px';
    canvas.style.left = input.rect.left + 'px';
    canvas.style.bottom = input.rect.bottom + 'px';
    canvas.style.right = input.rect.right + 'px';
    canvas.style.height = input.rect.height + 'px';
    canvas.style.width = input.rect.width + 'px';
  */

    console.log(previous);
    if (previous && previous.left) {

        var _p = (window.getSelection().getRangeAt().getClientRects()[0]);
        canvas.getContext('2d').fillStyle = "rgba(0, 0, 0, 0.5)";
        canvas.getContext('2d').fillRect(previous.left, previous.top, _p.left - previous.left, _p.bottom - previous.top);
        console.log(previous.left, previous.top, previous.left - _p.left, previous.top - _p.bottom);
    }
    previous = (window.getSelection().getRangeAt().getClientRects()[0]);
});
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;