JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="mycanvas"></canvas>
<input type="button" value="drops" onClick="drop(10,10);">

JavaScript

function drop(x, y) {
    var canvas = document.getElementById("mycanvas");
    var ctx = canvas.getContext('2d');
    canvas.width = 600;
    canvas.height = 600;
    canvas.style.border = "1px solid black";

    ctx.save();
    ctx.clearRect(0, 0, canvas.width, canvas.height);


    ctx.fillStyle = "orange";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.fill();

    ctx.restore();


    ctx.fillStyle = "red";
    ctx.moveTo(x - 5, y);
    ctx.lineTo(x, y - 7);
    ctx.lineTo(x + 5, y);
    ctx.arc(x, y, 5, 0, Math.PI);

    ctx.closePath();

    ctx.fill();

    y = y + 3;
    if (y == canvas.height) {
        y = 0;
    }

    var m = setTimeout('drop(' + x + ',' + y + ')', 20);
}

drop(10, 10);