Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] Não volta ao elemento 0 da lista

Consegui implementar a função, ela muda de cor até o elemento 2 da lista, porém não vola ao 0

<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 cor = ['red', 'green', 'blue'];
    var indiceCor = 0;
    
    function marca(event){
        var x = event.pageX - tela.offsetLeft;
        var y = event.pageY - tela.offsetTop;
       
       pincel.fillStyle= cor[indiceCor];
       pincel.beginPath();
       pincel.arc(x, y, 10, 0, 2*3.14);
       pincel.fill(); 
       
    }    
    
    function mudaCor(){
        indiceCor++
        if(indiceCor >= indiceCor.length){
            indiceCor = 0
        }
        return false;
    }
                
    tela.onclick = marca;
    tela.oncontextmenu = mudaCor;

</script>
1 resposta
solução!

Oi Rafael, tudo bem?

Parece que você está quase lá! O problema está na função mudaCor(). Você está tentando verificar se indiceCor é maior ou igual ao comprimento de indiceCor, mas indiceCor é um número, não um array.

Você deve verificar se indiceCor é maior ou igual ao comprimento do array cor. Então, a verificação correta seria indiceCor >= cor.length.

Aqui está o código corrigido:

<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 cor = ['red', 'green', 'blue'];
    var indiceCor = 0;
    
    function marca(event){
        var x = event.pageX - tela.offsetLeft;
        var y = event.pageY - tela.offsetTop;
       
       pincel.fillStyle= cor[indiceCor];
       pincel.beginPath();
       pincel.arc(x, y, 10, 0, 2*3.14);
       pincel.fill(); 
       
    }    
    
    function mudaCor(){
        indiceCor++
        if(indiceCor >= cor.length){
            indiceCor = 0
        }
        return false;
    }
                
    tela.onclick = marca;
    tela.oncontextmenu = mudaCor;

</script>

Você pode conferir aqui o teste que fiz. Espero ter ajudado.

Um abraço e bons estudos.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software