[Dúvida] se quisermos preencher <canvas> com quadrados pelo laço de repetição, tem como fazer um de cada cor?

Olá Santiago, tudo bem?

Vamos partir para um projeto que gera cores aleatórias e preencher a tela com quadrados coloridos.

Vamos criar a função que gera as cores aleatórias, desse modo:

 function CoresSortidas(cor) {
        var cores = ["darkblue", "blue", "lightblue", "orange", "red", "grey", "green", "yellow", "pink", "white", "black", "purple"];
        var sortear = Math.round(Math.random(cores) * 12);
        cor = cores[sortear];
        return cor;
    }

Essa função sorteia as cores através da variável sortear, que recebe um número de 0 e 12, que são as posições do array cores cada posição guardar um valor string que posteriormente vai ser a cor do quadrado, a função retorna o valor através do return cor esse valor será usado quando o quadrado for pintado.

Depois na função desenhaQuadrado devemos fazer uma pequena alteração.

function desenhaQuadrado(x, y, cor) {

        pincel.fillStyle = cor;
        pincel.fillRect(x, y, 50, 50); // x , y , width , height
        pincel.strokeRect(x, y, 50, 50);
    }

pincel.fillStyle vai receber a cor que é retornada da função CoresSortidas(), ou seja, agora ele desenha o quadrado e recebe a cor sorteada.

Por fim vamos criar doisfor para criar os quadrados e preencher a tela com eles,desse modo:

for (cont = 0; cont <= 8; cont++) {// for para troca de linha
        for (i = 0; i <= 12; i++) { // for que gera os quadrados
            desenhaQuadrado(x, y, CoresSortidas());
            x = x + 50;
        }
        y = y + 50;
        x = 0;
    }

O primeiro for é responsável por trocar de linha, ou seja, o segundo que está dentro dele, desenha os 8 quadrados chamando as funções desenha quadrado que recebe o y o x e a CoresSortidas e muda a posição do x desenhando um quadrado ao lado do outro.

Deixo abaixo o código completo para uma maior compreensão:

<meta charset="UTF-8">

<canvas width="600" height="400"></canvas>

<script>

    var x = 0;
    var y = 0;

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');

    pincel.fillStyle = "lightgrey";
    pincel.fillRect(0, 0, 200, 400); // x , y , width , height

    function desenhaQuadrado(x, y, cor) {

        pincel.fillStyle = cor;
        pincel.fillRect(x, y, 50, 50); // x , y , width , height
        pincel.strokeRect(x, y, 50, 50);

    }

    function CoresSortidas(cor) {
        var cores = ["darkblue", "blue", "lightblue", "orange", "red", "grey", "green", "yellow", "pink", "white", "black", "purple"];
        var sortear = Math.round(Math.random(cores) * 12);
        cor = cores[sortear];
        return cor;
    }


    for (cont = 0; cont <= 100; cont++) {

        for (i = 0; i <= 12; i++) {
            desenhaQuadrado(x, y, CoresSortidas());
            x = x + 50;
        }

        y = y + 50;
        x = 0;
    }

</script>

Caso surjam dúvidas, afinal foi muita informação, fique a vontade para expor ficarei feliz em te ajudar.

Um grande abraço e até mais!