Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Não acho meu erro!

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

<script>

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


        var tela = document.querySelector('canvas');
        var pincel = tela.getContext('2d');
        pincel.fillStyle = 'lightgray';
        pincel.fillRect(0, 0, 600, 400);

        pincel.fillStyle = cor;
        pincel.fillRect(x, y, tamanho, tamanho);
        pincel.strokeStyle = 'black';
        pincel.strokeRect(x, y, tamanho, tamanho);


    }

    desenhaQuadrado(0, 0, 50, 50, 'blue');
    desenhaQuadrado(50, 0, 50, 50, 'red');
    desenhaQuadrado(100, 0, 50, 50, 'yellow');
    desenhaQuadrado(150, 0, 50, 50, 'black');


</script>
4 respostas

Oi Alessandra

Tem alguns detalhes para ajustar:

Essa parte pode ser fora da função

  var tela = document.querySelector('canvas');
  var pincel = tela.getContext('2d');
  pincel.fillStyle = 'lightgray';
  pincel.fillRect(0, 0, 600, 400);

A função você está passando 2 parâmetros (tamanho), vc pode retirar 1 function desenhaQuadrado(x, y, tamanho, cor) {

Ai por fim só retirar um parâmetro de entrada na chamada da função desenhaQuadrado(0, 0, 50, 'blue');

Aqui o código com os detalhes que comentei:

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

<script>
  var tela = document.querySelector('canvas');
  var pincel = tela.getContext('2d');
  pincel.fillStyle = 'lightgray';
  pincel.fillRect(0, 0, 600, 400);

  function desenhaQuadrado(x, y, tamanho, cor) {
    pincel.fillStyle = cor;
    pincel.fillRect(x, y, tamanho, tamanho);
    pincel.strokeStyle = 'black';
    pincel.strokeRect(x, y, tamanho, tamanho);
  }

  desenhaQuadrado(0, 0, 50, 'blue');
  desenhaQuadrado(50, 0, 50, 'red');
  desenhaQuadrado(100, 0, 50, 'yellow');
  desenhaQuadrado(150, 0, 50, 'black');
</script>

Parabéns pelo empenho nos estudos!

Continue praticando e qualquer dúvida pode contar com a gente.

Oi Guilherme, poderia me tirar uma duvida?

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

<script>
  var tela = document.querySelector('canvas');
  var pincel = tela.getContext('2d');
  pincel.fillStyle = 'lightgray';
  pincel.fillRect(0, 0, 600, 400);

  function desenhaQuadrado(x, y, tamanho, cor) {
    pincel.fillStyle = cor;
    pincel.fillRect(x, y, tamanho, tamanho);  //pq tem que aparecer 2 vezes o "tamanho"? Por isso pensei que tinha que colocar 2 vezes o "50"  
    pincel.strokeStyle = 'black';
    pincel.strokeRect(x, y, tamanho, tamanho);
  }

  desenhaQuadrado(0, 0, 50, 'blue');  //E aqui que achava que tinha que colocar 2 vezes o "50", desenhaQuadrado(0,0,50,50,'blue";
  desenhaQuadrado(50, 0, 50, 'red');
  desenhaQuadrado(100, 0, 50, 'yellow');
  desenhaQuadrado(150, 0, 50, 'black');
</script
solução!

Oi alessandra tudo bem? Ao invés de colocar "tamanho e tamanho", você poderia colocar altura e largura ai fica menos confuso... Oque o instrutor quis dizer, que como existe o "parâmetro tamanho" vc só precisa dizer uma vez na função e repetir ele duas vezes, entendeu? Os parâmetros que utilizamos para fazer um retângulo são: coordenada X, coordenada Y, Altura e Largura, e na função está especificado a cor... porém quando você coloca, tamanho e tamanho, você não sabe qual é qual e fica meio confuso... Pq quando mesma ficou perdida quando o instrutor colocou apenas um tamanho na função, sendo que são dois (altura e largura) sugiro fazer assim:

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

<script>
  var tela = document.querySelector('canvas');
  var pincel = tela.getContext('2d');
  pincel.fillStyle = 'lightgray';
  pincel.fillRect(0, 0, 600, 400);

  function desenhaQuadrado(x, y, largura, altura, cor) {
    pincel.fillStyle = cor;
    pincel.fillRect(x, y, largura, altura);  //pq tem que aparecer 2 vezes o "tamanho"? Por isso pensei que tinha que colocar 2 vezes o "50"  
    pincel.strokeStyle = 'black';
    pincel.strokeRect(x, y, largura, altura);
  }

  desenhaQuadrado(0, 0, 50,  50,'blue');  //E aqui se fosse "tamanho" seria uma vez só, pq a função cobre os "dois" se for altura e largura vc tem q colocar cada um... 
  desenhaQuadrado(50, 0, 50, 50, 'red');
  desenhaQuadrado(100, 0, 50, 50, 'yellow');
  desenhaQuadrado(150, 0, 50, 50 ,'black');
</script>

espero ter ajudado... solucione a resposta no tópico para deixar mais organizado nosso fórum.

Marcelo, obrigada pela explicação!!!!!

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