Disenando con el Mouse

Buenas noches, les presento mi solucion:

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


<script>


    var pantalla = document.querySelector('canvas');
    var pincel = pantalla.getContext('2d');

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


    //paletas dibujadas//

    pincel.fillStyle = "red"
    pincel.fillRect(0,0,50,50);

    pincel.fillStyle = "green"
    pincel.fillRect(50,0,50,50);

    pincel.fillStyle = "blue"
    pincel.fillRect(100,0,50,50);






    var puedoDibujar = false;

    function dibujarCirculo(evento,color) {
        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop;


        //al poner dos validaciones, primero debe pasar por una antes de llegar a la otra//

    if(x > 160 || y > 60) {

        if(puedoDibujar) {

            pincel.fillStyle = color;
            pincel.beginPath();
            pincel.arc(x, y, 5, 0, 2 * 3.14);
            pincel.fill();
        }
    }
    }

    pantalla.onmousemove = dibujarCirculo;




    function colores (evento,color) {
       var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop;
        if(x < 50 || x < 0) {
            pincel.fillStyle = "red"
        } else if ( x < 50 || x < 100) {
            pincel.fillStyle = "green"
        } else if ( x < 100 || x < 150) {
            pincel.fillStyle = "blue"
        }
    };




    function habilitarDibujar(evento) {

        puedoDibujar = true;
    }

    function deshabilitarDibujar() {

        puedoDibujar = false;
    }

    pantalla.onclick = colores;

    pantalla.onmousedown = habilitarDibujar;

    pantalla.onmouseup = deshabilitarDibujar;






</script>