[Proyecto] Proyecto disenharConMouse

Saludos,

Les comparto mi código para este proyecto, espero les sea de utilidad. Por otra parte me gustaría saber si alguien sabe cómo desactivar el evento onmousedown cuando se sale del canvas o en este caso cuando se da click en la alerta que se genera cuando intentas dibujar en la paleta de colores.

Muchas gracias a todos :D

<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);
    var puedoDibujar = false;


    //Paleta de colores, tres cuadrados
    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);



    //Colores y seleccion inicial en azul
    var colores = ["red","green","blue"];
    var selec = 2;


    function dibujarCirculo(evento) {
        if (puedoDibujar) {
            var x = evento.pageX - pantalla.offsetLeft;
            var y = evento.pageY - pantalla.offsetTop;
            //se delimita el area donde no se puede dibujar
            if ((x>0)&&(x<150)&&(y>0)&&(y<50)) {
                alert("no se puede dibujar aqui")               
            }
            //en cualquier otro caso se dibuja
            else{
                pincel.fillStyle = colores[selec];
                pincel.beginPath();
                pincel.arc(x, y, 5, 0, 2 * 3.14);
                pincel.fill();
            }
        }
    }

    function habilitarDibujar(evento) {
        //Se reautiliza la funcion que detecta el clic del mouse para
        //verificar si se hizo clic en algun color y seleccionarlo
        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop;
        if ((x < 50)&&(x > 0)&&(y < 50)&&(y > 0)){
            selec = 0;
        }
        if ((x < 100)&&(x > 50)&&(y < 50)&&(y > 0)){
            selec = 1;
        }
        if ((x < 150)&&(x > 100)&&(y < 50)&&(y > 0)){
            selec = 2;
        }
        puedoDibujar = true;
    }

    function deshabilitarDibujar() {
        puedoDibujar = false;
    }

    pantalla.onmousemove = dibujarCirculo;

    pantalla.onmousedown = habilitarDibujar;

    pantalla.onmouseup = deshabilitarDibujar;

</script>