Meu código não está funcionando

Organizei um pouco o seu código. Coloquei uma borda no canvas para visualizar a mudança de tamanho. Mudei a lógica, agora só mostra o alvo quando acerta nele, mas ele não muda de posição quando se erra. Não entendo para que serve pincel.strokeRect(0, 0, tamanhoX, tamanhoY); mas mantive. Em dispara criei uma variável delta para facilitar acertar o alvo.

<meta charset="utf-8">
<big>Escolha o tamanho da tela!</big>
<br>
<button id="tamanho1" type="button"><big>Pequeno</big></button>
<br>
<button id="tamanho2" type="button"><big>Médio</big></button>
<br>
<button id="tamanho3" type="button"><big>Grande</big></button>
<br>
<canvas width="0" height="0" style="border:1px solid #d3d3d3;"></canvas>
<script type="text/javascript">

    var jaEscolheu = false;
    var botaoTamanho1 = document.getElementById("tamanho1");
    var botaoTamanho2 = document.getElementById("tamanho2");
    var botaoTamanho3 = document.getElementById("tamanho3");
    var tamanhoX = 0;
    var tamanhoY = 0;
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    var raio = 10;
    var x1 = 0;
    var y1 = 0;

    function sorteiaPosicao(xtotal, ytotal) {
        x1 = Math.round(Math.random() * (xtotal-2*raio) + raio);
        y1 = Math.round(Math.random() * (ytotal-2*raio) + raio);
    }

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

    function desenhaAlvo() {
        desenhaCirculo(x1, y1, raio + 20, 'red');
        desenhaCirculo(x1, y1, raio + 10, 'white');
        desenhaCirculo(x1, y1, raio, 'red');
        pincel.strokeRect(0, 0, tamanhoX, tamanhoY);
    }

    function dispara(evento) {
        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;
        if (jaEscolheu==true) {
            var delta = raio + 20;
            if (x>x1-delta && x<x1+delta && y>y1-delta && y<y1+delta) {
                desenhaAlvo();
                alert('Você acertou!');
            } else {
                console.log("----", x, y);
                alert('Você errou!');
            }
        }
    }

    botaoTamanho1.onclick = function() {
        tamanhoX = 600;
        tamanhoY = 400;
        tela.width = tamanhoX;
        tela.height = tamanhoY;
        sorteiaPosicao(tamanhoX, tamanhoY);
        console.log("alvo", x1, y1);
        jaEscolheu = true;
    }

    botaoTamanho2.onclick = function() {
        tamanhoX = 800;
        tamanhoY = 600;
        tela.width = tamanhoX;
        tela.height = tamanhoY;
        sorteiaPosicao(tamanhoX, tamanhoY);
        console.log("alvo", x1, y1);
        jaEscolheu = true;
    }

    botaoTamanho3.onclick = function() {
        tamanhoX = 1200;
        tamanhoY = 800;
        tela.width = tamanhoX;
        tela.height = tamanhoY;
        sorteiaPosicao(tamanhoX, tamanhoY);
        console.log("alvo", x1, y1);
        jaEscolheu = true;
    }

    tela.onclick = dispara;

</script>

Amigo, sua resposta me ajudou muito, mesmo ainda não funcionando. Ela me deu as ferramentas necessárias pra que eu pudesse fazer o meu código funcionar! Essa linha de código serve pra desenhar a borda do canvas, mas no seu código não precisa.

pincel.strokeRect(0, 0, tamanhoX, tamanhoY);

Aqui o código aprimorado:

<meta charset="utf-8">
<big>Escolha o tamanho da tela!</big>
<br>
<button id="tamanho1" type="button"><big>Pequeno</big></button>
<br>
<button id="tamanho2" type="button"><big>Médio</big></button>
<br>
<button id="tamanho3" type="button"><big>Grande</big></button>
<br>
<big>Escolha a dificuldade!</big>
<br>
<button id="dif1" type="button"><big>Fácil</big></button>
<br>
<button id="dif2" type="button"><big>Difícil</big></button>
<br><hr><br>
<button id="start" type="button"><big>Começar!</big></button>
<br>
<canvas width="0" height="0" style="border:1px solid #d3d3d3;"></canvas>
<script type="text/javascript">

    var jaEscolheuTam = false;
    var jaEscolheuDif = false;
    var jaComecou = false;
    var botaoTamanho1 = document.getElementById("tamanho1");
    var botaoTamanho2 = document.getElementById("tamanho2");
    var botaoTamanho3 = document.getElementById("tamanho3");
    var botaoDif1 = document.getElementById("dif1");
    var botaoDif2 = document.getElementById("dif2");
    var botaoStart = document.getElementById("start");
    var tamanhoX = 0;
    var tamanhoY = 0;
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    var raio = 10;
    var x1 = 0;
    var y1 = 0;
    var dificuldade = 'banana';

    function sorteiaPosicao(xtotal, ytotal) {
        x1 = Math.round(Math.random() * (xtotal-2*raio) + raio);
        y1 = Math.round(Math.random() * (ytotal-2*raio) + raio);
    }

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

    function desenhaAlvo() {
        desenhaCirculo(x1, y1, raio + 20, 'red');
        desenhaCirculo(x1, y1, raio + 10, 'white');
        desenhaCirculo(x1, y1, raio, 'red');
    }

    function dispara(evento) {
        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;
        var delta = raio + 20;

        if(jaComecou==true) {
            if(dificuldade == 'facil') {
                if (x>x1-delta && x<x1+delta && y>y1-delta && y<y1+delta) {
                    alert('Você acertou!');
                } else {
                    console.log("----", x, y);
                    alert('Você errou!');
                }

            } else if(dificuldade == 'dificil') {
                if (x>x1-raio && x<x1+raio && y>y1-raio && y<y1+raio) {
                    alert('Você acertou!');
                } else {
                    console.log("----", x, y);
                    alert('Você errou!');
            }

            }
        }


    }

    botaoTamanho1.onclick = function() {
        tamanhoX = 600;
        tamanhoY = 400;
        tela.width = tamanhoX;
        tela.height = tamanhoY;
        jaEscolheuTam = true;
    }

    botaoTamanho2.onclick = function() {
        tamanhoX = 800;
        tamanhoY = 500;
        tela.width = tamanhoX;
        tela.height = tamanhoY;
        jaEscolheuTam = true;
    }

    botaoTamanho3.onclick = function() {
        tamanhoX = 1200;
        tamanhoY = 800;
        tela.width = tamanhoX;
        tela.height = tamanhoY;
        jaEscolheuTam = true;
    }

    botaoDif1.onclick = function() {

        dificuldade = 'facil';
        jaEscolheuDif = true;
    } 

    botaoDif2.onclick = function() {

        dificuldade = 'dificil';
        jaEscolheuDif = true;

    } 

    botaoStart.onclick = function() {

        if(jaEscolheuTam == false && jaEscolheuDif == false) {
            alert('Escolha o tamanho e a dificuldade primeiro!');
        } else if(jaEscolheuTam == false) {
            alert('Escolha o tamanho primeiro!');
        } else if(jaEscolheuDif == false) {
            alert('Escolha a dificuldade primeiro!');
        }

        if(jaEscolheuTam == true && jaEscolheuDif == true) {
            jaComecou = true;
            sorteiaPosicao(tamanhoX, tamanhoY);
            desenhaAlvo();
            document.getElementById("start").disabled = true;       
        }

    }

    tela.onclick = dispara;



</script>

Falta muito ainda pra se tornar um jogo de verdade, mas tá quase lá. Só falta eu aprender como limpa o canvas sem deixar o código bugado.