Minha solução??

Boa noite, gostaria de saber se o modo como fiz para bloquear a paleta de cores e o modo como eu seleciono o quadrado da paleta de cor se está correto.

function desenhaQuadrado(x, y, tamanho, cor) {

pincel.fillStyle = cor;
pincel.fillRect(x, y, tamanho, tamanho)
pincel.fill();

}

function desenhaCirculo(x, y, raio, cor) {

if(x<=151 && y<=50){
    desabilitaDesenhar();

}else{
    pincel.fillStyle = cor;
    pincel.beginPath();
    pincel.arc(x, y, raio, 0, 2 * 3.14);
    pincel.fill();
}

}

function desenhaPaletaDeCores() {

desenhaQuadrado(xVermelho, yQuadrados, tamanhoQuadrados, 'red');
desenhaQuadrado(xVerde, yQuadrados, tamanhoQuadrados, 'green');
desenhaQuadrado(xAzul, yQuadrados, tamanhoQuadrados, 'blue');

}

function lidaComMovimentoDoMouse(evento) {

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

if(desenha) {

    desenhaCirculo(x, y, 5, corAtual);
}

}

function habilitaDesenhar() {

desenha = true;

}

function desabilitaDesenhar() {

desenha = false;

}

function selecionaCor(evento){ var xcor = evento.pageX - tela.offsetLeft; var ycor = evento.pageY - tela.offsetTop;

if((xcor > xVermelho-tamanhoQuadrados) && (xcor < xVermelho + tamanhoQuadrados) && (ycor > xVermelho-tamanhoQuadrados) && (ycor < xVermelho+tamanhoQuadrados) ){
    corAtual='red'
    desenhaCirculo(xcor, ycor, 5, corAtual);
    //alert("cor selecionada "+xcor +","+ycor);
}else if((xcor > xVerde-tamanhoQuadrados) && (xcor < xVerde + tamanhoQuadrados) && (ycor > xVerde-tamanhoQuadrados) && (ycor < xVerde+tamanhoQuadrados) ){
    corAtual='green'
    desenhaCirculo(xcor, ycor, 5, corAtual);
    //alert("cor selecionada "+xcor +","+ycor);
}else if((xcor > xAzul-tamanhoQuadrados) && (xcor < xAzul + tamanhoQuadrados) && (ycor > xAzul-tamanhoQuadrados) && (ycor < xAzul+tamanhoQuadrados) ){
    corAtual='blue'
    desenhaCirculo(xcor, ycor, 5, corAtual);
    //alert("cor selecionada "+xcor +","+ycor);
}

console.log(xcor +","+ycor);

}

var tela = document.querySelector('canvas'); var pincel = tela.getContext('2d'); pincel.fillStyle = 'lightgray'; pincel.fillRect(0, 0, 600, 400);

var desenha = false; var corAtual = 'blue'; var xVermelho = 0; var xVerde = 50; var xAzul = 100; var yQuadrados = 0; var tamanhoQuadrados = 50;

desenhaPaletaDeCores(); // mostra os quadrados de seleção de cores

tela.onmousemove = lidaComMovimentoDoMouse;

tela.onmousedown = habilitaDesenhar;

tela.onmouseup = desabilitaDesenhar;

tela.onclick = selecionaCor;