JSFiddle - React, Tailwind, and code Playground

by Adrian

HTML

dsjklfjldkl a flj ;fjsdafjsdalfjsd afjsda jflsdjafkljasdfkl sdjaklf jsdaklfjsdklafjsdklafjsda fjsdafsdaf sf sd fsda fsdafljsda fja fjsdfj ;as
<div class="text">
    Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum <span class="circled">Hello there, blah blah blah Hello there, blah blah blah </span> ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem <span class="circled rect">ipsum lorem</span> ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
</div>

CSS

.text {
    //width:250px;
    line-height:18px;
    padding: 10px 0 50px 40px;
    z-index:0;
}

.circled {
    font-style:italic;
}

JavaScript

function getCanvas(i, left, top, width, height)
{
    var canvas;
    var circles = document.getElementById("circles");
    if (typeof circles.childNodes[i] != 'undefined')
    {
        canvas = circles.childNodes[i];
        canvas.width=width;
        canvas.height=height;
        canvas.style.left=left+"px";
        canvas.style.top=top+"px";
    }
    else
    {
        canvas = "<canvas "+
        "width='"+width+"' "+
        "height='"+height+"' "+
        "style='"+
            "position:absolute;"+
            "z-index:0;"+
            "left:"+left+"px;"+
            "top:"+top+"px;"+
            "pointer-events:none;"+
            //"border:1px solid;"+
        "' />";
        circles.insertAdjacentHTML('beforeend', canvas);
    }
    return circles.childNodes[i];
}

function circleRect(i, rect)
{
    var diameter = Math.sqrt(rect.width*rect.width+rect.height*rect.height);
    var cx = (rect.right + rect.left)/2;
    var cy = (rect.top + rect.bottom)/2;
    var left = Math.floor(cx - diameter/2);
    var top  = Math.floor(cy - diameter/2);
    diameter = Math.floor(diameter);
    var canvas = getCanvas(i, left-1, top-1, diameter+2, diameter+2);
    var ctx=canvas.getContext("2d");
    ctx.beginPath();
    ctx.arc(diameter/2+1,diameter/2+1,diameter/2,0,2*Math.PI);
    ctx.lineWidth=2;
    ctx.strokeStyle = "red";
    ctx.stroke();
}

function rectRect(i, rect)
{
    var canvas = getCanvas(i, rect.left-1, rect.top-1, rect.width+2, rect.height+2);
    var ctx=canvas.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(1, 1);
    ctx.lineTo(rect.width+1, 1);
    ctx.lineTo(rect.width+1, rect.height+1);
    ctx.lineTo(1, rect.height+1);
    ctx.lineTo(1, 1);
    ctx.strokeStyle = "red";
    ctx.lineWidth=2;
    ctx.stroke();
}

function drawCircles()
{
    $(".circled").each(function(i, obj) {
        var rect = obj.getBoundingClientRect();
        if (/\brect\b/.test(obj.className))
        {
            rectRect(i, rect);
        }
        else
       ...