A única coisa diferente é que eu optei por função genérica ao invés de setar e depois chamar no final, mesclei a função de palheta dentro da lidaComMovimento e configurei a restrição dentro do lidaComMovimento também, pra ser só o tamanhoQuadrados + 1.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>programa 2</title>
</head>
<body>
<canvas id="canvas" width="600" height="400">Your browser doesn't suppot canvas</canvas>
<p id=score></p>
<script type="text/javascript">
console.log(`hello world!`);
const canvas = document.getElementById('canvas');
const ctx2D = canvas.getContext('2d');
let canvasW = canvas.width;
let canvasH = canvas.height;
function drwRect(x, y, w, h, color) {
ctx2D.fillStyle = `${color}`;
ctx2D.fillRect(x, y, w, h);
}
function drwCircle(x, y, r, cor) {
ctx2D.fillStyle = cor;
ctx2D.beginPath();
ctx2D.arc(x, y, r, 0, 2 * 3.14);
ctx2D.fill();
}
function desenhaPaletaDeCores() {
drwRect(xVermelho, yQuadrados, tamanhoQuadrados, tamanhoQuadrados, 'red');
drwRect(xVerde, yQuadrados, tamanhoQuadrados, tamanhoQuadrados, 'green');
drwRect(xAzul, yQuadrados, tamanhoQuadrados, tamanhoQuadrados, 'blue');
}
drwRect(0, 0, canvasW, canvasH, 'lightgray');
let desenha = false;
let corAtual = 'blue';
let tamanhoQuadrados = 50;
let xVermelho = 0;
let xVerde = tamanhoQuadrados;
let xAzul = tamanhoQuadrados * 2;
let yQuadrados = 0
desenhaPaletaDeCores(); // mostra os quadrados de seleção de cores
canvas.onmousemove = function(event) {
let mouseX = event.pageX - canvas.offsetLeft;
let mouseY = event.pageY - canvas.offsetTop;
if(desenha && mouseY > tamanhoQuadrados + 1) {
drwCircle(mouseX, mouseY, 2.5, corAtual);
}
canvas.onclick = function() {
if(mouseY < tamanhoQuadrados + 1) {
if(mouseX < xVerde + 1) {
corAtual = 'red';
}
else if (mouseX < xAzul + 1
&& mouseX > xVerde) {
corAtual = 'green';
}
else if (mouseX < tamanhoQuadrados * 3 + 1
&& mouseX > xAzul) {
corAtual = 'blue';
}
}
};
}
canvas.onmousedown = function() {
desenha = true;
}
canvas.onmouseup = function () {
desenha = false;
}
</script>
</body>
</html>
