Entrar ¿Aún no tienes acceso?
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Solucionado (ver solución)
Solucionado
(ver solución)
3
respuestas

Dimensiones Canvas

Referente al curso Lógica de programación: Practicando con juegos y animaciones, en el capítulo Diseñando gráficos con Canvas y actividad Diseñando una bandera con un pincel

por Estudiante
| 86.7k xp | 8 posts

Mi canvas no me permite modificar su "altura". En proporción sale de unos 150px. Si coloco menos de eso se reduce, pero si es más no lo refleja en el navegador.

<canvas width="600" heigth="400">

</canvas>

<script>

    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");

    pincel.fillStyle = "lightgrey"
    pincel.fillRect(0,0,600,400);

    pincel.fillStyle = "green"
    pincel.fillRect(0,0,200,400);

    pincel.fillStyle = "red"
    pincel.fillRect(400,0,600,400);    

</script>

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

3 respuestas
por Gerardo Sebastián López
| 12.4k xp | 15 posts

Intentaste poniendo todas las etiquetas de html? a mi me funciona bien así:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Canvas 1º parte</title>
  </head>
  <body>

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

    <script>
      var pantalla = document.querySelector("canvas");

      var pincel = pantalla.getContext("2d"); 

      pincel.fillStyle = "lightgrey";

      pincel.fillRect(0, 0, 600, 400);

      pincel.fillStyle = "green";

      pincel.fillRect(0, 0, 200, 400);

      pincel.fillStyle = "red";

      pincel.fillRect(400, 0, 600, 400);
    </script>
  </body>
</html>
por Estudiante
| 86.7k xp | 8 posts

Hola Gerardo. Copie todas las etiquetas de tu código, pero nada, sigo con el mismo problema.

solución!
por Estudiante
| 86.7k xp | 8 posts

Solucionado. Escribí "heigth" en lugar de "height"