No alvo! [Meu código]

<meta charset="UTF-8">
<canvas width="600" height="400"></canvas>
<script>
    var canvas = document.querySelector('canvas');
    var brush = canvas.getContext('2d');


    brush.fillStyle = 'aliceblue';
    brush.fillRect(0, 0, 600, 400);
    var radius = 10;

    function drawCircle(x, y, radius, color) {
        brush.fillStyle = color;
        brush.beginPath();
        brush.arc(x, y, radius, 0, 2 * 3.14);
        brush.fill();

    }

    drawCircle(300, 200, radius + 20, 'red');
    drawCircle(300, 200, radius + 10, 'white');
    drawCircle(300, 200, radius, 'red');

    function shot(event) {
        var x = event.pageX - canvas.offsetLeft;
        var y = event.pageY - canvas.offsetTop;

        if (x >= 290 &&
            x <= 310 &&
            y >= 190 &&
            y <= 210)

        {
            alert('Uhuuu! Acertou o alvo!');
        } else {
            alert("Infelizmente você errou! :( Continue tentando e logo conseguirá!! :D")
        }
    }

    canvas.onclick = shot;
</script>