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");
      ctx.fillStyle = "Chartreuse";
      ctx.fillRect(130, 100, 200, 200);
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");
      ctx.strokeStyle = "Black";
      ctx.lineWidth = 10;
      ctx.strokeRect(130, 100, 200, 200);
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");
      ctx.fillStyle = "White";
      ctx.fillRect(150, 150, 60, 60);
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");
      ctx.fillStyle = "Black";
      ctx.fillRect(150, 150, 40, 40);
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");
      ctx.fillStyle = "White";
      ctx.fillRect(250, 150, 60, 60);
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");
      ctx.fillStyle = "Black";
      ctx.fillRect(270, 170, 40, 40);
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");
      ctx.fillStyle = "Chartreuse";
      ctx.fillRect(130, 300, 200, 300);
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");
      ctx.strokeStyle = "black";
      ctx.lineWidth = 10;
      ctx.strokeRect(130, 300, 200, 300);
       var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");
      ctx.fillStyle = "Red";
      ctx.fillRect(170, 230, 120, 680);
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");
      ctx.fillStyle = "Chartreuse";
      ctx.fillRect(60, 300, 60, 270);
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");
      ctx.strokeStyle =...