JSFiddle - React, Tailwind, and code Playground

by Jaty4

HTML

<canvas id="canvas" style="background:#eeeeee"></canvas>

JavaScript

(function(elid, width, height){
        var canvas = document.querySelector(elid),
                ctx = canvas.getContext("2d"),
                pos = 0, blocks = [];
        canvas.width = width; canvas.height = height;
        ctx.fillStyle = "black";
        
        var modelUp = function(height){
            if(height == '') height = 0;
            ctx = canvas.getContext("2d");
            ctx.clearRect(0,0,width,height)
            ctx.fillStyle = "black";
            ctx.beginPath();
            ctx.moveTo(width/2, height);
            ctx.lineTo(width/2+10, height);
            ctx.lineTo(width/2+10, height-10);
            ctx.lineTo(width/2+20, height-10);
            ctx.lineTo(width/2+20, height);
            ctx.lineTo(width/2+30, height);
            ctx.lineTo(width/2+30, height-20);
            ctx.lineTo(width/2+20, height-20);
            ctx.lineTo(width/2+20, height-30);
            ctx.lineTo(width/2+10, height-30);
            ctx.lineTo(width/2+10, height-20);
            ctx.lineTo(width/2, height-20);
            ctx.lineTo(width/2, height);
            ctx.fill();
        }
        var modelRight = function(){
            ctx = canvas.getContext("2d");
            ctx.clearRect(0,0,width,height)
            ctx.fillStyle = "black";
            ctx.beginPath();
            ctx.moveTo(width/2, height);
            ctx.lineTo(width/2+20, height);
            ctx.lineTo(width/2+20, height-10);
            ctx.lineTo(width/2+30, height-10);
            ctx.lineTo(width/2+30, height-20);
            ctx.lineTo(width/2+20, height-20);
            ctx.lineTo(width/2+20, height-30);
            ctx.lineTo(width/2, height-30);
            ctx.lineTo(width/2, height-20);
            ctx.lineTo(width/2+10, height-20);
            ctx.lineTo(width/2+10, height-10);
            ctx.lineTo(width/2, height-10);
            ctx.lineTo(width/2, height);
            ctx.fill();
        }
        modelUp();
        document.addEventListener('keydown',...