Dúvida no Ex. 2 da Aula 2 - Extraindo funções

Apesar das duas funções usarem o mesmo código nas duas primeiras linhas, cada função faz uma coisa diferente embora parecida (uma cria um quadrado vermelho outra um verde), logo você tem que criar a tela e dizer qual é o contexto para cada uma (2d). Não sei se teria como separar esses códigos repetidos em algum local e depois chamar de um modo mais simples dentro da função, mas irei dar uma pesquisada depois!

Isabel,

Pra você não ter que repetir o código várias vezes, é só criar uma função desenhaQuadrado() por exemplo, e como parâmetro você passaria os tamanhos e a cor, então com apenas uma função você poderia fazer vários quadrados de diversas cores, sem precisar escrever o mesmo código várias vezes.

A função ficaria mais ou menos assim:

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

<script>
var desenhaQuadrado = function(x,y,cor) {
    var tela = document.getElementById("tela");
    var c = tela.getContext("2d");

    c.fillStyle=cor;
    c.fillRect(x, y, 50, 50);
};

desenhaQuadrado(0,0, "green");
desenhaQuadrado(100,100, "red");
</script>

Desenhei os dois quadrados sem precisar repetir os códigos que você citou, agora é só chamar a função e passar os parâmetros quando quiser desenhar, Ex:

desenhaQuadrado(150,150, "blue");