[Duda] Optimicen el proyecto

Este fue mi codigo, quedo un poco diferente aunque reuse lo de no colorear en la paleta de colores Me ayudan con consejos de optimisacion por favor

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

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

var puedoDibujar = false;
var elegirColor = "blue";


function dibujarCuadrado(x, y, color) {
    pincel.fillStyle = color;
    pincel.fillRect(x, y, 50, 50);
    pincel.strokeStyle = "black";
    pincel.strokeRect(x, y, 50, 50);
}

function dibujarCirculo(x,y) {
    if (puedoDibujar) {
        pincel.fillStyle = elegirColor;
        pincel.beginPath();
        pincel.arc(x, y, 5, 0, 2 * 3.14);
        pincel.fill();
    }
}

function habilitarDibujar() {

    puedoDibujar = true;
}

function deshabilitarDibujar() {

    puedoDibujar = false;
}

function seleccionarColor(evento) {
    var x = evento.pageX - pantalla.offsetLeft;
    var y = evento.pageY - pantalla.offsetTop;
    if (x > 0 && x < 50 && y > 0 && y < 50) {
        elegirColor = "Red";
    } if (x > 51 && x < 100 && y > 0 && y < 50) {
        elegirColor = "Green";
    } if (x > 101 && x < 150 && y > 0 && y < 50) {
        elegirColor = "Blue";
    }
}

function puedeDisenharArea(xCoo,yCoo){
    if (xCoo >= 0 && xCoo < 155 && yCoo >= 0 && yCoo < 55) {
        return false;
    }else{
        return true;
    }
}

function capturarMovimientoDelMause(evento){
    var x = evento.pageX - pantalla.offsetLeft;
    var y = evento.pageY - pantalla.offsetTop;
    if (puedeDisenharArea(x,y)){
        dibujarCirculo(x,y);
    }
}

dibujarCuadrado(0, 0, "red");
dibujarCuadrado(50, 0, "green");
dibujarCuadrado(100, 0, "blue");

pantalla.onclick = seleccionarColor;

pantalla.onmousemove = capturarMovimientoDelMause;

pantalla.onmousedown = habilitarDibujar;

pantalla.onmouseup = deshabilitarDibujar;