<meta charset="utf-8">
<canvas id='myCanvas'></canvas>

<script type="text/javascript">
    const myCanvas = document.getElementById('myCanvas');
    const context = myCanvas.getContext('2d');
    myCanvas.width = window.innerWidth - 20;
    myCanvas.height = window.innerHeight - 20;
    myCanvas.style.backgroundColor = 'black'
    const circle = {
        xPos: myCanvas.width / 2,
        yPos: myCanvas.height / 2,
        minRadius: 20,
        maxRadius: 30,
        drawRadius: 20,
        color: 'yellow',
        inflation: true
    };

    setInterval(animateCircle, 20);

    function drawCircle (X, Y, radius, color) {
        context.beginPath();
        context.fillStyle = color;
        context.arc(X, Y, radius, 0, 2 * Math.PI);
        context.fill();
    }

    function pulsateCircle () {
        if (circle.drawRadius === circle.minRadius) { circle.inflation = true }
        if (circle.drawRadius === circle.maxRadius) { circle.inflation = false }
        if (circle.inflation) { circle.drawRadius++ } else { circle.drawRadius-- }
    }

    function clearScreen () {
        context.clearRect(0, 0, myCanvas.width, myCanvas.height);
    }

    function animateCircle () {
        clearScreen();
        drawCircle(circle.xPos, circle.yPos, circle.drawRadius, circle.color);
        pulsateCircle();
    }
</script>