Trocando de cor e limpando a tela

Acrescentei mais duas funcionalidades ao exercício proposto. Inseri outro elemento canvas para indicar qual a cor selecionada no momento e um botão para limpar a tela. Segue abaixo o código:

<canvas id="tela" width="600" height="400"></canvas>
<canvas id="indicador_cor" width="50" height="50"></canvas>

<button>Limpar Tela</button>

<script>
    var tela = document.querySelector("#tela");
    var pincel = tela.getContext("2d");

    var indicadorCor = document.querySelector("#indicador_cor");
    var pincelIndicadorCor = indicadorCor.getContext("2d");
    pincelIndicadorCor.fillStyle = "blue";
    pincelIndicadorCor.fillRect(0, 0, 50, 50);

    var button = document.querySelector("button");

    pincel.fillStyle = "gray";
    pincel.fillRect(0, 0, 600, 400);
    pincel.fillStyle = "blue";

    function desenhaCirculo(evento) {
        // console.log(evento);
        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;
        // console.log("Cliquei nas coordenadas:\nx = " + x + " e y = " + y);
        pincel.fillStyle = cores[posicao];
        pincel.beginPath();
        pincel.arc(x, y, 10, 0, 2 * Math.PI);
        pincel.fill();
    }

    function limpaTela() {
        pincel.fillStyle = "gray";
        pincel.fillRect(0, 0, 600, 400);
        pincel.fillStyle = "blue";
        posicao = 0;
        mudaIndicadorCor();
    }

    function mudaCor() {
        posicao++;
        if (posicao >= cores.length) {
            posicao = 0;
        }
        mudaIndicadorCor();
        return false;
    }

    function mudaIndicadorCor() {
        pincelIndicadorCor.fillStyle = cores[posicao];
        pincelIndicadorCor.fillRect(0, 0, 50, 50);
    }

    var cores = ["blue", "red", "green"];
    var posicao = 0;

    tela.onclick = desenhaCirculo;
    button.onclick = limpaTela;
    tela.oncontextmenu = mudaCor;
</script>

Apesar do código estar funcionando surgiram algumas dúvidas:

1. Primeiramente tentei inserir o elemento canvas #indicador_cor dentro do elemento canvas #tela assim como também o botão de limpar tela para ficarem todos os elementos dentro do espaço de 600 x 400. Mas nenhum dos dois apareciam no navegador. É possível inserir outros elementos dentro do elemento canvas?

2. Aprendi no curso de Lógica de Programação I que as funções devem vir em primeiro lugar dentro da tag de script. Alguns exemplos mostrados neste curso, assim como a resposta deste exercício, declaram algumas variáveis antes das funções. Pelo que percebi isso não interfere na execução do código. Isso realmente não tem relevância ou é uma boa prática iniciar com as funções?

3. Apesar de estar funcionando a função limpaTela() abaixo

function limpaTela() {
        pincel.fillStyle = "gray";
        pincel.fillRect(0, 0, 600, 400);
        pincel.fillStyle = "blue";
        posicao = 0;
        mudaIndicadorCor();
    }

ela reconstroi novamente os elementos canvas #tela e canvas #indicador_cor. Não achei muito elegante essa solução. Haveria outra forma?