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

    <br>
    Escolha uma cor <input type="color">

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

        var paleta = document.querySelector("input");

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

        desenha = false;

        function desenhaCirculo(evento) {

            if(desenha) {

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

                pincel.fillStyle = paleta.value //sempre pega o valor atual da PALETA, OU SEJA DO INPUT!!!
                pincel.beginPath();
                pincel.arc(x, y, 10, 0, 2 * 3.14);
                pincel.fill();

            }

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

        }

        tela.onmousemove = desenhaCirculo;

        /*
        function habilitaDesenhar() {

            desenha = true;

        }

        function desabilitaDesenhar() {

            desenha = false;

        }

        tela.onmousedown = habilitaDesenhar;
        tela.onmouseup = desabilitaDesenhar;
        */

        tela.onmousedown = function () {

            desenha = true;

        }

        tela.onmouseup = function () {

            desenha = false;

        }

    </script>