JSFiddle - React, Tailwind, and code Playground

by jonathanmh

HTML

<div id="wrapper">
            <canvas id="myCanvas"  width="500" height="500">
            </canvas>
        </div>

CSS

#wrapper {
    height: 500px;
}

JavaScript

$(document).ready(function() {
    function combined(num1, num2){
                ctx.lineTo(num1, num2);
                ctx.moveTo(num1, num2);    
    }
                var canvas = document.getElementById("myCanvas");
                var ctx = canvas.getContext("2d");
                ctx.lineWidth = 2;
                ctx.beginPath();
                
                ctx.fillRect(5, 5, 20, 21);
                ctx.fillRect(50, 5, 20, 21);
                ctx.fillRect(90, 5, 20, 21);
                ctx.fillRect(130, 5, 20, 21);
                ctx.fillRect(7, 25, 2, 3);
                ctx.fillRect(8, 24, 2, 3);
                ctx.fillRect(8, 25, 5, 5);
                ctx.fillRect(9, 30, 2, 3);
                ctx.fillRect(12, 25, 40, 15);
                ctx.fillRect(13, 15, 10, 25);   
                ctx.fillRect(143, 25, 5, 5);
                ctx.fillRect(139, 25, 5, 5);
                ctx.fillRect(134, 25, 5, 5);
                ctx.fillRect(129, 25, 5, 5);
                ctx.fillRect(140, 30, 5, 3);
                ctx.fillRect(120, 30, 20, 3);
                ctx.fillRect(120, 33, 22, 3);
                ctx.fillRect(120, 35, 20, 3);
                ctx.fillRect(120, 38, 18, 3);
                ctx.fillRect(120, 40, 16, 3);
                ctx.fillRect(120, 42, 14, 3);
                ctx.fillRect(120, 44, 13, 4);
                ctx.fillRect(10, 30, 4, 4);
                ctx.fillRect(15, 25, 20, 20 );
                ctx.fillRect(18, 25, 112, 25  );             
                ctx.fillRect(21, 70, 110, 59 );
                ctx.fillRect(5, 150, 144, 19 );
                ctx.moveTo(5, 5);
                ctx.lineTo(5, 25);
                ctx.moveTo(5, 5);
                ctx.lineTo(25, 5);
                ctx.moveTo(25, 5);
                ctx.lineTo(25, 25);
                ctx.moveTo(25, 25);
                ctx.lineTo(50, 25);
                ctx.moveTo(50, 25);
                ctx.lineTo(50, 5);
                ctx.moveTo(50, 5);
         ...