JSFiddle - React, Tailwind, and code Playground

by rcravens

HTML

<div id="page">
    
    <p>
        <label for="first">First Name</label>
        <input type="text" id="first" name="first" />
    </p>
    <p>
        <label for="last">Last Name</label>
        <input type="text" id="last" name="last" />
    </p>
    <p>
        <label for="email">Email</label>
        <input type="text" id="email" name="email" />
    </p>
    <p>
        <label></label>
        <input type="button" value="test" />
    </p>
    
</div>

CSS

#page{
    margin: 10px;
    padding: 10px;
    border: 1px solid #f2f2f2;   
}

p{
    overflow: auto;
    margin: 5px 0; 
}

p > label{
    margin: 3px 5px;
    float: left;
    width: 100px;
    text-align: right; 
    display: block;
}

JavaScript

$(document).ready(function() {

    monitor($("#page"));

});


function monitor(elem) {
    var elem = elem;

    var mousePositions = [];

    var offset = elem.offset();
    var width = elem.outerWidth();
    var height = elem.outerHeight();
    var disp = $("<canvas>").css({
        width: width,
        height: height,
        position: 'absolute',
        left: offset.left,
        top: offset.top,
        display: 'none'
    }).insertAfter(elem);

    // drop control panel after the element
    var ctrls = $("<div>").insertAfter(elem);

    disp.hide();
    var start = $("<input>").attr("type", "button").val("start").click(function() {
        startMonitor();
    }).appendTo(ctrls);

    var stop = $("<input>").attr("type", "button").val("stop").click(function() {
        stopMonitor();
    }).attr("disabled", "disabled").appendTo(ctrls);

    var show = $("<input>").attr("type", "button").val("show").click(function() {
        renderData();
    }).attr("disabled", "disabled").appendTo(ctrls);

    var clear = $("<input>").attr("type", "button").val("clear").click(function() {
        mousePositions = [];
        show.attr("disabled", "disabled");
        clear.attr("disabled", "disabled");
        disp.hide();
    }).attr("disabled", "disabled").appendTo(ctrls);


    renderData();

    function renderData() {
        disp.show();
        var canvas = disp[0];
        if (canvas.getContext) {
            var ctx = canvas.getContext("2d");

            ctx.clearRect(0, 0, width, height);
            
            ctx.fillStyle = "rgba(200,200,200,0.5)";
            ctx.fillRect(0,0,width,height);
            var numPositions = mousePositions.length;
            if (numPositions > 2) {
                ctx.beginPath();
                var pos = mousePositions[0];
                ctx.moveTo(pos[0], pos[1]);
                for (var i = 1; i < numPositions; i++) {
                    pos = mousePositions[i];
                    ctx.lineTo(pos[0], pos[1]);
     ...