JSFiddle - React, Tailwind, and code Playground

by totoromaum

HTML

<!DOCTYPE html>
<html>

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

  <body>
    <canvas id="canvas" width="800" height="800"></canvas>
    <script>
    //filled rectangles
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");
      ctx.fillStyle = "red";
      ctx.fillRect(90, 20, 50, 50);
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");
      ctx.fillStyle = "orange";
      ctx.fillRect(110, 70, 10, 20);
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");
      ctx.fillStyle = "yellow";
      ctx.fillRect(40, 90, 150, 10);
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");
      ctx.fillStyle = "green";
      ctx.fillRect(80, 100, 70, 60);
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");
      ctx.fillStyle = "blue";
      ctx.fillRect(80, 160, 10, 50);
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");
      ctx.fillStyle = "purple";
      ctx.fillRect(140, 160, 10, 50);
      //Holo Rectangles
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");
      ctx.strokeStyle = "red";
      ctx.lineWidth = 4;
      ctx.strokeRect(250, 20, 50, 50);
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");
      ctx.strokeStyle = "orange";
      ctx.lineWidth = 4;
      ctx.strokeRect(270, 70, 10, 20);
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");
      ctx.strokeStyle = "yellow";
      ctx.lineWidth = 4;
      ctx.strokeRect(200, 90, 150, 10);
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");
      ctx.strokeStyle = "green";
      ctx.lineWidth = 4;
      ctx.strokeRect(240, 100, 70, 60);
      var canvas =...