Não ficou igual ao do instrutor mas fiquei feliz por finalmente ter conseguido atingir o objetivo por conta própria =)
<meta charset="UTF-8">
<canvas width="600" height="400"></canvas>
<script>
function desenhaQuadrado(x,y,tamanho,cor){
pincel.fillStyle=cor;
pincel.fillRect(x,y,tamanho,tamanho)
pincel.fill();
}
function desenhaCirculo(x,y,raio,cor){
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 lidaComMovimentosDoMouse(evento){
var x=evento.pageX-tela.offsetLeft;
var y=evento.pageY-tela.offsetTop;
if(x>0&&x<150&&y>0&&y<50){
desenha=false;
}
if(desenha){
desenhaCirculo(x,y,5,corAtual);
}
}
function habilitaDesenhar(){
desenha=true;
}
function desabilitaDesenhar(){
desenha=false;
}
function mudaCor(evento){
var x=evento.pageX-tela.offsetLeft;
var y=evento.pageY-tela.offsetTop;
if(x>0&&x<50&&y>0&&y<50){
corAtual='red';
}
if(x>50&&x<100&&y>0&&y<50){
corAtual='green';
}
if(x>100&&x<150&&y>0&&y<50){
corAtual='blue';
}
}
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();
tela.onmousemove=lidaComMovimentosDoMouse;
tela.onmousedown=habilitaDesenhar;
tela.onmouseup=desabilitaDesenhar;
tela.onclick=mudaCor;
</script>