Parâmetro

Minha dúvida é pra que serve este parâmetro, já que consegui realizar a atividade da fração sem o uso deste. Segue código:

<meta charset="UTF-8">

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

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

function desenhaQuadrado(x, y, tamanho, cor) {

    pincel.fillStyle = cor
    pincel.fillRect(x,y,tamanho,tamanho)
    pincel.fill()     
    pincel.strokeRect(x,y,tamanho,tamanho)

}


function desenhaTexto(texto, x , y) {

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

        pincel.font='20px Georgia';
        pincel.fillStyle='black';
        pincel.fillText(texto, x, y);    
}


// testando com for

var y = 0
for (var x=0; x<400; x=x+100) {

    if (x<300) {
        cor="green";
    }
        else {
        cor ="pink"
        }


desenhaQuadrado(x,y,100,cor)      

}

desenhaTexto("Qual é a fração?", 120, 130);


// testando com while

/* var x = 0
var y = 0

while (x<400) {

    if (x<300) {
        cor="green";
    }
        else {
        cor ="pink"
        }    

desenhaQuadrado(x,y,100,cor)      
x=x+100

}

desenhaTexto("Qual é a fração?", 120, 130);

*/


</script>

Oi Alan, tudo bem?

Obrigado pela paciência em aguardar uma resposta!

A propriedade pincel.beginPath() é utilizada para indicar que um caminho será traçado. Normalmente ela é associada a outros comandos como:

moveTo, que indica a posição inicial do pincel;
lineTo, que cria uma linha a partir do início do desenho até um ponto determinado;
fillStyle, que define a cor de preenchimento da figura;
fill(), que preenche o desenho dentro das linhas traçadas;

Todas essas propriedades tem relação com desenho de figuras geométricas que não sejam retângulos, quadrados ou círculos e devem ser utilizadas seguindo a seguinte ordem:

pincel.fillStyle = (“black”); // 1 - indicar a cor;
pincel.beginPath(); // 2 - indicar que um desenho será feito;
pincel.moveTo(300, 200); // 3 - mover o pincel para a coordenada inicial;
pincel.lineTo(200, 400); // 4 - criar quantas linhas forem necessárias;
pincel.lineTo(400, 400);
pincel.fill(); // 5 - preencher o desenho;

No caso do exercício envolvendo frações esse conjunto de propriedades não é necessário, pois utiliza-se o comando pincel.fillRect() que assume como parâmetros as coordenadas “x”, “y”, largura e altura. Exemplo:

pincel.fillRect(10, 10, 50, 100);

Ao analisar a escrita do comando acima, é possível perceber que um retângulo com 50 de largura e 100 de altura será desenhado na posição (10,10) do canvas.

Gostaria também de dar uma dica para que você desenvolva mais as boas práticas em relação a escrita dos comandos. Sempre é bom, ao final da escrita dos comandos, colocar um ponto e vírgula (;) para evitar complicações com códigos mais complexos.

Espero ter ajudado. Caso tenha outras dúvidas, estarei à disposição para te auxiliar.

Sucesso e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado! ✓.