Solucionado
Sim, aparentemente sim, mas não consigo dizer algo concreto sem ver o codigo
<canvas width="600" height="400"></canvas>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle = 'grey';
pincel.fillRect(0, 0, 600, 400);
function desenhaCirculo(evento, cor) {
var x = evento.pageX - tela.offsetLeft;
var y = evento.pageY - tela.offsetTop;
pincel.fillStyle = cor;
pincel.beginPath();
pincel.arc(x, y, 10, 0, 2 * 3.14);
pincel.fill();
console.log(x + ',' + y);
}
function mudaCor(cores) {
var contador = 0;
while(contador < cores.length){
tela.onclick = desenhaCirculo(evento, cores[i]);
contador++;
alert('Funcionou!');
}
return false;
}
var cores = ['blue', 'red', 'green'];
tela.oncontextmenu = mudaCor(cores);
</script>
Josemar, o problema esta aqui:
tela.oncontextmenu = mudaCor(cores);
Para eventos e, oncontextmenu é um evento, você precisa chamar uma função que é atribuída à tela.oncontextmenu. No entanto, veja que você passou o resultado da função mudaCor porque invocou a função com parênteses passando a lista de cores como parâmetro. Como o retorno é false você estará gravando false em. tela.oncontextmenu.
A primeira mudança a ser feita é:
tela.oncontextmenu = mudaCor;
Veja que agora tela.oncontextmenu recebe a função, seu código e não seu resultado. É como se tela.oncontextmenu passasse a ser a função mudaCor.
Quando o botão é clicado o navegador sem você ver chama a função armazenada em tela.oncontextmenu. Mas temos um problema.
Sua função muda cor não pode receber a lista de fotos como parâmetro porque o navegador só sabe chamar a função e não sabe passar o array de cores. Nesse sentido sua função mudaCor precisa mudar, por exemplo, não precisa receber cores como parâmetro. Variáveis declaradas fora de uma função é acessível diretamente dentro da função.
Outro ponto é que mostraCor não deve associar o evento onclick. Essa associação deve ser feita fora... Uma coisa é mudar cor outra coisa é desenhar na tela.
Aguardamos seu código modificado.
Josemar, segue um passo a passo das alterações que vou fazer no seu código. Estude-as com carinho!
1 - Seu código atual!
<canvas width="600" height="400"></canvas>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle = 'grey';
pincel.fillRect(0, 0, 600, 400);
function desenhaCirculo(evento, cor) {
var x = evento.pageX - tela.offsetLeft;
var y = evento.pageY - tela.offsetTop;
pincel.fillStyle = cor;
pincel.beginPath();
pincel.arc(x, y, 10, 0, 2 * 3.14);
pincel.fill();
console.log(x + ',' + y);
}
function mudaCor(cores) {
var contador = 0;
while(contador < cores.length){
tela.onclick = desenhaCirculo(evento, cores[i]);
contador++;
alert('Funcionou!');
}
return false;
}
var cores = ['blue', 'red', 'green'];
tela.oncontextmenu = mudaCor(cores);
</script>Vou mudar a atribuição de tela.oncontextmenu que deve receber a função mudaCor e não o resultado de sua chamada. Também vamos remover o parâmetro cores!
<canvas width="600" height="400"></canvas>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle = 'grey';
pincel.fillRect(0, 0, 600, 400);
function desenhaCirculo(evento, cor) {
var x = evento.pageX - tela.offsetLeft;
var y = evento.pageY - tela.offsetTop;
pincel.fillStyle = cor;
pincel.beginPath();
pincel.arc(x, y, 10, 0, 2 * 3.14);
pincel.fill();
console.log(x + ',' + y);
}
// mudei aqui, removi o parâmetro
function mudaCor() {
var contador = 0;
while(contador < cores.length){
tela.onclick = desenhaCirculo(evento, cores[i]);
contador++;
alert('Funcionou!');
}
return false;
}
var cores = ['blue', 'red', 'green'];
// mudei aqui
tela.oncontextmenu = mudaCor;
</script>3 - Agora vou extrair a associação de tela.onclick para fora de mudaCor. São duas coisas que acontecem em separado:
<canvas width="600" height="400"></canvas>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle = 'grey';
pincel.fillRect(0, 0, 600, 400);
function desenhaCirculo(evento) {
var x = evento.pageX - tela.offsetLeft;
var y = evento.pageY - tela.offsetTop;
pincel.fillStyle = cor;
pincel.beginPath();
pincel.arc(x, y, 10, 0, 2 * 3.14);
pincel.fill();
console.log(x + ',' + y);
}
function mudaCor() {
var contador = 0;
while(contador < cores.length){
contador++;
alert('Funcionou!');
}
return false;
}
var cores = ['blue', 'red', 'green'];
// veja que também não chamei a função desenhaCirculo, ela foi atribuída para tela.onclick
tela.onclick = desenhaCirculo;
tela.oncontextmenu = mudaCor;
</script>4 - Toda vez que clicarmos com o botão direito o contador ser a zerado, não podemos fazer isso. É por isso que a variável contador vai ser declarada para fora do mudaCor e lá dentro ela será incrementada:
<canvas width="600" height="400"></canvas>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle = 'grey';
pincel.fillRect(0, 0, 600, 400);
var contador = 0; // declarei o contador fora das funções. Ele pode ser acessado dentro da função sem ser passado como parâmetro.
function desenhaCirculo(evento) {
var x = evento.pageX - tela.offsetLeft;
var y = evento.pageY - tela.offsetTop;
pincel.fillStyle = cor;
pincel.beginPath();
pincel.arc(x, y, 10, 0, 2 * 3.14);
pincel.fill();
console.log(x + ',' + y);
}
function mudaCor() {
// toda vez que o botão direito é clicado, incremento o contador e texto se cheguei na última cor. Se cheguei, volto o contador para zero
contador++;
if(contador == cores.length) {
contador = 0;
}
return false;
}
var cores = ['blue', 'red', 'green'];
// veja que também não chamei a função desenhaCirculo, ela foi atribuída para tela.onclick
tela.onclick = desenhaCirculo;
tela.oncontextmenu = mudaCor;
</script>5 - Ainda não esta pronto, vou organizar as variáveis, jogar a lista de cores lá para o topo, perto de contador. Vou alterar a função desenhaCirculo para acessar o array de cores levando em consideração o último contador atribuído pela função mudaCor chamada quando clico com o botão direito:
<canvas width="600" height="400"></canvas>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle = 'grey';
pincel.fillRect(0, 0, 600, 400);
var contador = 0;
var cores = ['blue', 'red', 'green'];
function desenhaCirculo(evento) {
var x = evento.pageX - tela.offsetLeft;
var y = evento.pageY - tela.offsetTop;
// aqui acesso o array de cores, levando em consideração a cor atual!
pincel.fillStyle = cores[contador];
pincel.beginPath();
pincel.arc(x, y, 10, 0, 2 * 3.14);
pincel.fill();
console.log(x + ',' + y);
}
function mudaCor() {
// toda vez que o botão direito é clicado, incremento o contador e texto se cheguei na última cor. Se cheguei, volto o contador para zero
contador++;
if(contador == cores.length) {
contador = 0;
}
return false;
}
tela.onclick = desenhaCirculo;
tela.oncontextmenu = mudaCor;
</script>Sucesso e bom estudo meu aluno!
Josemar, não esquece de me dar um feedback sobre dúvidas que possam ter aparecido. Se esta tudo certinho, não esqueça de marcar minha resposta como solução.