Consegui fazer o codigo funcionar mas ele tem um erro. Não consigo selecionar a cor que quero sem antes seguir uma sequencia da esquerda para direita.
Qual poderia ser o erro:
var tela = document.querySelector('canvas');
var pincel = tela.getContext ('2d');
pincel.fillStyle = 'grey';
pincel.fillRect(0, 0, 400, 400);
pincel.fill();
function desenhaQuadrado (x, y, tamanho, cor) {
pincel.fillStyle = cor;
pincel.fillRect (x, y, tamanho, tamanho);
pincel.fill ();
}
function paletaCores () {
desenhaQuadrado(xRed, yQuadrado, tamanhoQuadrado, 'red');
desenhaQuadrado(xBlue, yQuadrado, tamanhoQuadrado, 'blue');
desenhaQuadrado(xOrange, yQuadrado, tamanhoQuadrado, 'orange');
}
function desenhaCirculo(x, y, raio, cor) {
pincel.fillStyle = cor;
pincel.beginPath();
pincel.arc(x, y, raio, 0, 2 * 3.14);
pincel.fill();
}
function movimentoMouse (evento) {
var x = evento.pageX - tela.offsetLeft;
var y = evento.pageY - tela.offsetTop;
if(desenha && + desenhaArea(x, y)) {
desenhaCirculo(x, y, 5, corSelecionada);
}
}
function habilitaDesenhar() {
desenha = true;
}
function desabilitaDesenhar() {
desenha = false;
}
function desenhaArea (x, y) {
if(x >= 0 && x < 3*tamanhoQuadrado && y >= 0 && y < tamanhoQuadrado) {
return false;
} else {
return true;
}
}
function selecionaCor (evento) {
var x = evento.pageX - tela.offsetLeft;
var y = evento.pageY - tela.offsetTop;
if (y > yQuadrado && y < yQuadrado + tamanhoQuadrado) {
if (x > xRed && x < xRed + tamanhoQuadrado) {
corSelecionada = 'red';
}
} else if (x > xBlue && x < xBlue + tamanhoQuadrado) {
corSelecionada = 'blue';
} else if (x > xOrange && x < xOrange + tamanhoQuadrado) {
corSelecionada = 'orange';
}
}
tela.onmousemove = movimentoMouse;
tela.onclick = selecionaCor;
tela.onmousedown = habilitaDesenhar;
tela.onmouseup = desabilitaDesenhar;
var desenha = false;
var corSelecionada = 'white';
var yQuadrado = 0;
var tamanhoQuadrado = 50;
var xRed = 0;
var xBlue = 50;
var xOrange = 100;
paletaCores();
