JSFiddle - React, Tailwind, and code Playground

by Amar Nyayapati

HTML

<script type="text/javascript">
    function rect()
    {
        var canvas = $("#main");
        var cxt = canvas.getContext("2d");
        //$("#mainCanvas").attr("draggable",true);
        cxt.rect(20,20,100,60);
    //cxt.arc(20, 20, 35, 0 , 2 * Math.PI, true);
        cxt.stroke();
    }
    
    function create(e)
    {
        var canvas = $("#main")[0];
        var cxt = canvas.getContext("2d");
        x=e.clientX;
        y=e.clientY;
        cxt.rect(x-4,y-4,100,60);
    //cxt.arc(x, y, 35, 0 , 2 * Math.PI, true);
        cxt.stroke();
        $("#div1").html(x+" "+y);
    }
</script>
<body onload="rect()">
    <canvas id="main" width="700px" height="700px"  onmouseup="create2(event)" onmousedown="create(event)"></canvas><div id="div1"></div>
</body>
</html>