Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Um quadrado alto demais....

Referente ao curso JavaScript e HTML: pratique lógica com desenhos, animações e um jogo, no capítulo Desenhando gráficos com Canvas e atividade Desenhando com um pincel

por Wilton Ribeiro
| 127.9k xp | 57 posts

Olá, Na minha perspectiva esse código deveria gerar um quadrado mas, não é bem isso que aparece para mim....

<!DOCTYPE html>
<html>
<head>
    <title>Canvas Master</title>
    <meta charset="utf-8">
    <style>
        .tela{
            width: 500px;
            height: 500px;
        }
    </style>
</head>
<body>
    <canvas class="tela">
</body>
    <script>
        // Código principal

        pintorDeQuadrados();

        // Funções
        function pintorDeQuadrados(tamanho = 250, x = 0, y = 0, cor = "lightgray"){
            var tela = document.querySelector(".tela");
            var pincel = tela.getContext("2d");
            pincel.fillStyle = cor;
            pincel.fillRect(x, y, tamanho, tamanho);
        }
    </script>
</html>
2 respostas
por Yuri Matheus
| 667.4k xp | 367 posts
Alura Scuba Team

Oi Wilton, tudo bem?

Veja que no código você não fechou a tag canvas, esse pode ser o motivo do erro.

Fiz essa alteração no seu código e ele funcionou para mim:

<!DOCTYPE html>
<html>
<head>
    <title>Canvas Master</title>
    <meta charset="utf-8">
    <style>
        .tela{
            width: 500px;
            height: 500px;
        }
    </style>
</head>
<body>
    <canvas class="tela"></canvas>
  <script>
        // Código principal

        pintorDeQuadrados();

        // Funções
        function pintorDeQuadrados(tamanho = 250, x = 0, y = 0, cor = "red"){
            var tela = document.querySelector(".tela");
            var pincel = tela.getContext("2d");
            pincel.fillStyle = cor;
            pincel.fillRect(x, y, tamanho, tamanho);
        }
    </script>
</body>
</html>
solução!
por Wilton Ribeiro
| 127.9k xp | 57 posts

Verdade Yuri,

Mas além disso o meu erro estava em definir o tamanho e a largura com css, quando retirei isso voltou a funcionar:

<!DOCTYPE html>
<html>
<head>
    <title>Canvas Master</title>
    <meta charset="utf-8">
    <style>
      /*
      .tela{
        width: 500px;
        heigth: 500px;                
      }
      */
    </style>
</head>
<body>
    <!-- Eu tinha definido o "width" e o "height" via css -->
    <canvas class="tela" width="500" height="500"></canvas>
  <script>
        // Código principal

        pintorDeQuadrados();

        // Funções
        function pintorDeQuadrados(tamanho = 250, x = 0, y = 0, cor = "red"){
            var tela = document.querySelector(".tela");
            var pincel = tela.getContext("2d");
            pincel.fillStyle = cor;
            pincel.fillRect(x, y, tamanho, tamanho);
        }
    </script>
</body>
</html>

O porquê disso, sinceramente não sei....