JSFiddle - React, Tailwind, and code Playground

HTML

<button onclick="draw(0,0)">Draw</button>
<canvas id="canvas" width="550" height="300"></canvas>
<div id="fnText"></div>

CSS

canvas{border:#666 1px solid;}

JavaScript

function draw(x,y){
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    ctx.save();
    ctx.clearRect(0,0,550,400);
    ctx.fillStyle = "rgba(0,200,0,1)";
    ctx.fillRect (x, y, 50, 50);
    ctx.restore(); 
    x += 1;
    document.getElementById('fnText').innerHTML='draw('+x+','+y+')';
        var loopTimer = setTimeout('draw('+x+','+y+')',30);
}