Minha Resposta

<canvas width="600" height="400"></canvas>
<br>
Escolha uma cor
<br>
<input type="color">
<script>

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

    // Tela do Canvas 600x400
    pincel.fillStyle = "lightyellow"
    pincel.fillRect(0,0,600,400);

    var input = document.querySelector("input");
    function desenhaCirculo(x,y,raio,input){

        // Desenha um circulo
        pincel.fillStyle = input;
        pincel.beginPath();
        pincel.arc(x, y, raio, 0, 2 * 3.14);
        pincel.fill();
    }

    var fazDesenho = false;

    var raio = 10

    tela.onmousemove = function (evento){

        if(fazDesenho){
            var x = evento.pageX - tela.offsetLeft;
            var y = evento.pageY - tela.offsetTop;

            desenhaCirculo(x,y,raio,input.value);

            if(evento.shiftKey == true && raio < 60){
                desenhaCirculo(x,y,raio,input.value);
                raio = raio + 2;
            }
            if (evento.ctrlKey == true && raio > 10) {
                desenhaCirculo(x,y,raio,input.value);
                raio = raio - 2
            }
        }
        console.log(x +"," + y);
    }

    tela.onmousedown = function(){
        fazDesenho = true
    }

    tela.onmouseup = function desenhaNao(){
        fazDesenho = false
    }



</script>