Oi Wesley, vamos ao feedback do seu código. Vou em partes, tudo bem?
Bom, o primeiro ponto que eu quero ressaltar é que você não pode usar arrow functions com eventos. Não sei se você fez meu curso avançado de JavaScript no qual explico isso. Vou resumir para você: arrow function não é apenas uma sintaxe mais enxuta que a function, ela possui escopo léxico e isso pode zuar com seus códigos que precisam de um this dinâmico.
No entanto, só é um aviso mesmo, porque dentro da arrow function você não esta acessando this, se acessasse, teria problema. Então, sua arrow function vai funcionar.
Outro ponto. Você escreveu o código da arrow function inline, em programação, códigos são complicados de se entender, pois possuem legibilidade prejudicada. Pode ser que você curta código inline, mas se for trabalhar em uma equipe se essa equipe não curtir, você terá que se adequar ao padrão.
Agora, vamos ao seu código, o motivo dele não ter funcionado.
No curso de lógica 2, em nenhum momento ensino a usar o addEventListener, porque para quem esta começando é muito mais simples trabalhar com evento como propriedade. Me parece que você já tem algum conhecimento de JavaScript e veio fazer esse curso para iniciantes por algum motivo, talvez para revisar seus conhecimentos. No entanto, quando você usa addEventListener, precisa cancelar o evento padrão com event.preventDefault(), fica a dia.
Seu código final:
<canvas width="600" height="400"></canvas>
<script>
const tela = document.querySelector('canvas');
const pincel = tela.getContext('2d');
pincel.fillStyle = "lightgrey";
tela.width = window.innerWidth / 2;
tela.height = window.innerHeight / 2;
const colors = ["blue","red","green"];
pincel.fillRect(0,0,tela.width,tela.height);
let cont = 0;
const drawCircle = value => {
let x = value.pageX;
let y = value.pageY;
pincel.beginPath();
pincel.arc(x,y,20,0,2 * 3.14);
pincel.fill();
};
const changeClick = event => {
event.preventDefault();
pincel.fillStyle = colors[cont];
cont = cont + 1;
if(cont == 3) cont = 0;
};
tela.addEventListener('contextmenu',changeClick);
tela.addEventListener('click',drawCircle);
</script>
Para o return false funcionar você deve fazer:
const changeClick = event => {
pincel.fillStyle = colors[cont];
cont = cont + 1;
if(cont == 3) cont = 0;
return false;
};
// não usei addeventListener
tela.oncontextmenu = changeClick;
tela.addEventListener('click',drawCircle);
Foi legal porque assim pude revisar várias coisas com você. No mais, deu para perceber que você quer realmente escrever um código enxuto. Eu valorizo isso!
Sucesso e bom estudo meu aluno.
