Quero uma dica para completar meu código de pintar a tela

1º - Quero poder mudar a cor do canvas de dentro do navegador, mas não sei como posso fazer isso.

2º - Quero uma dica para resumir o código no final que compara se cliquei com o mouse para poder desenhar arrastando o mouse

<meta charset="utf-8">

<canvas width="600" height="400"></canvas>
<br>
Escolha a cor do pincel <input type="color" name="corDoPincel">
<br>
Escolha a cor da tela <input type="color" name="corDaTela"> 
/* não sei ainda como escolher a cor da tela */

<script type="text/javascript">

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    var paleta = document.querySelector('input');

    var arrastar = false;

    var raio = 10;

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

    function desenhaCirculo(evento) {

        if(arrastar) {

            var x = evento.pageX - tela.offsetLeft;
            var y = evento.pageY - tela.offsetTop;

            pincel.fillStyle = paleta.value;
            pincel.beginPath();
            pincel.arc(x, y, raio, 0, 2 * 3.14);
            pincel.fill();
        }

        if (evento.shiftKey && evento.altKey) {

           alert('Por favor, uma tecla apertada por vez.')

        } else if (evento.shiftKey && raio + 10 <= 20){

            raio = raio + 10;

        } else if (evento.altKey && raio - 5 >= 10) {

            raio = raio - 5;
        }

        console.log(x + ',' + y);

    }

    /código que quero resumir/
    tela.onmousemove = desenhaCirculo;

    function habilitaDesenhar() {

        arrastar = true;
    }

    function desabilitaDesenhar() {

        arrastar = false;
    }

    tela.onmousedown = habilitaDesenhar;

    tela.onmouseup = desabilitaDesenhar;

</script>