JSFiddle - React, Tailwind, and code Playground

HTML

<!--
  How to see the artifacts in WEBKIT BROWSERS ONLY
   1. Drag the gray header, shake mouse, notice NO artifacts as you shake the div
   2. Drop the header, resize div using the lower right handle so that you see about an equal amount of green and purple
   3. Repeat step 1, only this time artifacts are everywhere in webkit browsers (not IE 10 or FF 19)
   4. Now delete the javascript code from line 11 on down (the function and call) and run fiddle again
   5. Repeat the test in steps 1-3.  Without the canvas, there are NO artifacts.
   6. Try in non-webkit browsers.  NO artifacts.
-->

<div id="wrapper">
    <div id="header"></div>
    <div id="content"></div>
</div>

CSS

body {background-color: silver}

#wrapper {position: relative; width: 300px; height: 300px; background-color: silver;border: 6px solid lightgray; z-index: 2; border-radius: 15px; overflow: hidden;}

#header {position: absolute; width: 100%; height: 16px; background-color: gray;
top: 0px; left: 0px}

#content {position: absolute; width: 100%; height: 284px; background-color: limegreen; top: 16px; left: 0px;}

JavaScript

$("#wrapper").draggable({
    cursor: "move",
    cursorAt: {top: 30},
    handle: "#header",
});

$("#wrapper").resizable({
    handles: "s, se, e"
});

function Draw(toolID) {
        // determine height of the div and set the codeDiv height accordingly
        var
            wrapperHeight = $("#" + toolID).height(),
            headerHeight = $("#" + toolID).find("#header").height()
        ;
        
        var codeDiv = $("#" + toolID).find("#content");
        $(codeDiv).height(wrapperHeight - headerHeight);
        
        console.log("wrapperHeight:" + wrapperHeight); // 300
        console.log("headerHeight:" + headerHeight); // 16
        console.log("codeDivHeight:" + $(codeDiv).height()); // 284
        
        // create canvas and assign physical attributes
        var canvas = document.createElement("canvas");
        canvas.id = "canvas_1";
        canvas.width = $(codeDiv).width();
        canvas.height = $(codeDiv).height();
        
        // with canvas created; get drawing context on it
        var cc = canvas.getContext("2d");
        
        // background
        cc.fillStyle = "purple";
        cc.fillRect(0,0,canvas.width,canvas.height);
        cc.strokeStyle="black";
        cc.lineWidth = 5;
        cc.strokeRect(0,0,canvas.width,canvas.height);
        
        // drawing done; attach to the code div of the tool
        $(canvas).appendTo(codeDiv);
}

Draw("wrapper");