JSFiddle - React, Tailwind, and code Playground

by totoromaum

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>Canvas</title>
  </head>

  <body>
    <canvas id="canvas" width="1000" height="10000"></canvas>
    <script>
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");
      //Face   (O_o)
      ctx.fillStyle = "Chartreuse";
      ctx.fillRect(130, 100, 200, 200);
      ctx.strokeStyle = "Black";
      ctx.lineWidth = 10;
      ctx.strokeRect(130, 100, 200, 200);
      ////Right Eye     (O  )
      ctx.fillStyle = "White";
      ctx.fillRect(150, 150, 60, 60);
      ctx.fillStyle = "Black";
      //Left Eye(  o)
      ctx.fillRect(150, 150, 40, 40);
      ctx.fillStyle = "White";
      ctx.fillRect(250, 150, 60, 60);
      ctx.fillStyle = "Black";
      //Body
      ctx.fillRect(270, 170, 40, 40);
      ctx.fillStyle = "Chartreuse";
      ctx.fillRect(130, 300, 200, 300);
      ctx.strokeStyle = "black";
      ctx.lineWidth = 10;
      //Right Arm
      ctx.strokeRect(130, 300, 200, 300);
      ctx.fillStyle = "Chartreuse";
      ctx.fillRect(60, 300, 60, 270);
      ctx.strokeStyle = "Black";
      ctx.lineWidth = 10;
      ctx.strokeRect(60, 300, 60, 270);
      //Left Arm
      ctx.fillStyle = "Chartreuse";
      ctx.fillRect(340, 300, 60, 270);
      ctx.strokeStyle = "Black";
      ctx.lineWidth = 10;
      ctx.strokeRect(340, 300, 60, 270);
      //left Leg
      ctx.fillStyle = "Chartreuse";
      ctx.fillRect(230, 610, 100, 300);
      ctx.strokeStyle = "Black";
      ctx.lineWidth = 10;
      ctx.strokeRect(230, 610, 100, 300);
      //Right Leg
      ctx.fillStyle = "Chartreuse";
      ctx.fillRect(130, 610, 100, 300);
      ctx.strokeStyle = "Black";
      ctx.lineWidth = 10;
      ctx.strokeRect(130, 610, 100, 300);
      //Mouth ( _ )
      ctx.fillStyle = "PeachPuff ";
      ctx.fillRect(170, 230, 120, 640);
      ctx.strokeStyle = "Red";
      ctx.lineWidth = 15;
      ctx.strokeRect(178, 230, 105, 640);
      //Top Teeth
      ctx.fillStyle = "White";
     ...