JSFiddle - React, Tailwind, and code Playground

by Amar Nyayapati

HTML

<canvas id="myCanvas" width="300" height="350" style="border:1px solid #d3d3d3; ">
your browser does not support the canvas tag </canvas>

<script type="text/javascript">

    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.beginPath();
    ctx.fillStyle="Bisque ";
    ctx.arc(100,75,50,0*Math.PI,2.0*Math.PI);
    ctx.stroke();
    ctx.fill();

    ctx.fillStyle="black";
    ctx.fillRect(80,50,10,10);
    ctx.fillStyle="black";
    ctx.fillRect(110,50,10,10);
    ctx.moveTo(110,95);
    ctx.arc(100,95,12,0,1.0*Math.PI,false);
    ctx.stroke();
    ctx.closePath();
    ctx.beginPath();
    ctx.fillStyle="red";
    ctx.fillRect(95,75,10,10);
    ctx.lineTo(25,35);
    ctx.moveTo(100,250);
    ctx.lineTo(40,125);
    ctx.lineTo(160,125);
    ctx.moveTo(100,125);
    ctx.lineTo(100,250);
    ctx.lineTo(160,125);
    ctx.stroke();
    ctx.closePath();
    ctx.beginPath();
    ctx.fillStyle="black";
    ctx.fillRect(150,125,10,70) ;
    ctx.fillRect(40,125,10,70) ;
    ctx.fill();
    ctx.stroke();
    ctx.closePath();
    ctx.beginPath();
    ctx.fillStyle="black";
    ctx.fillRect(80,210,40,40) ;
    ctx.fill();
    ctx.stroke();
    ctx.closePath();
    ctx.beginPath();
    fillStyle="blue";
    ctx.fillRect(75,240,10,70) ;
    ctx.fillRect(115,240,10,70) ;
               
    ctx.stroke();
</script>