Apenas pontos no circulo

<canvas width="600" height="400"></canvas>

<script>

    const tela = document.querySelector('canvas');
    const pincel = tela.getContext('2d');

    pincel.fillStyle = 'lightgray';
    pincel.fillRect(0, 0, 600, 400);

    const raio = 20;

    function desenhaCirculo(x, y, raio, cor) {

        pincel.fillStyle = cor;
        pincel.beginPath();
        pincel.arc(x, y, raio, 0, 2 * Math.PI);
        pincel.fill();
    }

    desenhaCirculo(300,200, raio + 40, 'red'); // maior círculo
    desenhaCirculo(300,200, raio + 20, 'white');
    desenhaCirculo(300,200, raio, 'red'); // menor circulo

    function dispara(evento) {

    let x = evento.pageX - tela.offsetLeft;
    let y = evento.pageY - tela.offsetTop;
    console.log(x + ',' + y);


        function distancia (x, y) {
            const centroX = 300;
            const centroY = 200;                
            const dist = ((centroX - x)**2 + (centroY - y)**2)**0.5
            return dist;
        }
        function acertou (x, y) {
            const raio = 20;
            const dist = distancia(x,y);
            if (dist <= raio) { 

                return true;
                console.log(dist, raio);
            }
        }
     if (acertou(x,y)) {
        alert("acertou");

     }     

   // lógica de acerto?
}

tela.onclick = dispara;

`

Como a resposta oferecida aceitava pontos fora do circulo, pois o limite de pontos formava um quadrado, pensei dessa forma, calculando a distancia entre dois pontos, e aceitando apenas quando fosse menor do que o raio. garantindo o formato do circulo.