JSFiddle - React, Tailwind, and code Playground

by writen

HTML

<canvas id="canvas" width="600" height="350" onclick></canvas>
<br>
<button id="button">GO</button>

CSS

#canvas {
    border:1px solid black;
}

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext("2d");
var trasa = []; //trasa zapisana w formie tabeli
var coords = {}; // obiekt z koorynatami x,y
var x, y; //koordynaty x,y
var clicked = false; //rysuje trasę tylko przy naciśnięciu myszki

canvas.addEventListener('mousemove', draw, false);
canvas.addEventListener('mousedown', function () {
    clicked = true;
});
canvas.addEventListener('mouseup', function () {
    clicked = false;
});
//rysuj trasę
function draw(ev) {
    if (clicked) {
        x = ev.layerX;
        y = ev.layerY;
        
        coords = {
            x : x,
            y : y
        };
        trasa.push(coords);
        
        ctx.lineTo(x, y);
        ctx.stroke();
    } else {
        ctx.beginPath();
    }
}
// gracz - kulka
    ctx.arc(20, 20, 5, 0, Math.PI * 2);
    ctx.closePath();
    ctx.fill();
// idź do punktu
var i = 0;
var timer;
var go = function () {
    if(i < trasa.length) {
        ctx.clearRect(0, 0, canvas.width, canvas.height); //wyczyść canvas
        ctx.beginPath();
        ctx.arc(trasa[i].x, trasa[i].y, 5, 0, Math.PI * 2); //wyślij kulke do końca trasy
        ctx.closePath();
        ctx.fill();
        i++;
       timer = setTimeout(go, 1000/60);
    } else clearTimeout(timer);
};
button.addEventListener("click", function(){
    timer = setTimeout(go, 1000/60);   
});