Não consigo fazer funcionar o 'oncontextmenu' no cavas | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

Olá pessoal !!

noa estou conseguindo fazer funcionar o 'oncontextmenu' no exercicio trocando de cor,

meu codigo:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>teste</title>
</head>
<body>
    <canvas style="display: block;margin: 50px auto" width="600" height="400" id="canvas1" ></canvas>

    <script>
        var tela = document.querySelector('#canvas1');
        var pincel = tela.getContext('2d');
        var contador = 0;
        var texto = '';
        var cor = 0;

        function criaT4(texto,desloX,desloY,cor,fontSize){
            texto = texto.toUpperCase();
            pincel.font = `${fontSize} ariel` ;
            pincel.fillStyle = cor;
            pincel.fillText(texto, desloX, desloY); };

        function desenhaTela(evento){
            console.log(contador);
            var x = evento.pageX - tela.offsetLeft;
            var y = evento.pageY - tela.offsetTop;
            if(contador ==10){
                texto = 'não aprendi'
                contador = 0
            } else {
                texto = 'sim aprendi'
            }
            contador++;
            cor++;
            console.log(evento);
        }

        tela.onclick = desenhaTela;

        function mudacor(evento){
            evento.preventDefault();
            console.log('certo');
            return false;
            }

        tela.oncontextmenu = mudacor;

        pincel.fillStyle = 'grey';
        pincel.fillRect(0,0,600,400);
        </script>
</body>
</html>

Alguem consegue me ajudar?

obrigado!

Mergulhe em programação