document.addEventListener("DOMContentLoaded", function() {
// window.addEventListener('load', function() {
    const canvas = document.getElementById("canvas");
    const ctx = canvas.getContext("2d");
    // Kör rajzolása
    ctx.beginPath();
    ctx.arc(50, 50, 30, 0, 2 * Math.PI);
    ctx.stroke();

    // A téglalap alapadatai
    let rectX = 0;
    const rectY = 100;
    const rectWidth = 80;
    const rectHeight = 50;
    
    let intervalId;
    drawRectangle();
    
    function drawRectangle() {
        if (rectX > (canvas.width-80)) {
            clearInterval(intervalId);
        }        
        
        ctx.strokeStyle = 'blue';
        ctx.fillStyle = 'blue';

        ctx.clearRect(0, rectY, canvas.width, rectHeight);
        ctx.fillRect(rectX, rectY, rectWidth, rectHeight);
        rectX += 1;
        if (rectX > canvas.width) {
            rectX = 0;
        }
    }
    
    document.getElementById("startButton").addEventListener("click", function() {
        intervalId = setInterval(drawRectangle, 10);
    });
    document.getElementById("stopButton").addEventListener("click", function() {
        clearInterval(intervalId);
    });
    document.getElementById("resetButton").addEventListener("click", function() {
        clearInterval(intervalId);
        rectX = 0;
        drawRectangle();
    });
});