Les comparto mi resultado... me pareció práctico trabajar con listas el tema de los colores de la paleta para que en caso de que se requiera cambiarlos, sólo se debería modificar en la lista y no en varias partes del código.
<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 x=0;
var colorActual="blue";
var paleta = ["red","green","blue"];
var posicion= 0;
function crearCuadrado(x, color){
pincel.fillStyle = color;
pincel.fillRect(x,0,50,50);
pincel.fill();
}
function crearPaleta (){
crearCuadrado(x, paleta[0]);
crearCuadrado(x+50, paleta[1]);
crearCuadrado(x+100, paleta[2]);
}
function seleccionarColor(evento){
var x = evento.pageX - pantalla.offsetLeft;
var y = evento.pageY - pantalla.offsetTop;
if((x < 50)&&(y<50)){
colorActual= paleta[0];
}
if ((x < 100)&&(x>50)&&(y<50)){
colorActual= paleta [1];
}
if((x < 150)&&(x>100)&&(y<50)){
colorActual= paleta[2];
}
console.log(colorActual);
}
var puedoDibujar = false;
function dibujarCirculo(evento) {
if(puedoDibujar) {
var x = evento.pageX - pantalla.offsetLeft;
var y = evento.pageY - pantalla.offsetTop;
if ((x>150+5)|| (y>50+5)){
pincel.fillStyle = colorActual;
pincel.beginPath();
pincel.arc(x, y, 5, 0, 2 * 3.14);
pincel.fill();
}
}
}
pantalla.onmousemove = dibujarCirculo;
function habilitarDibujar() {
puedoDibujar = true;
}
function deshabilitarDibujar() {
puedoDibujar = false;
}
crearPaleta();
pantalla.onmousedown = habilitarDibujar;
pantalla.onmouseup = deshabilitarDibujar;
pantalla.onclick = seleccionarColor;
</script>