Adrian Ipalnepohuani Rodriguez Velazquez
PreguntaHola, tengo un error que no veo como solucionar, mi canvas no se muestra completo en mi navegador, le cree un marco para verificar y mi canvas se corta y no puedo ver el resto de mi dibujo. Alguien sabe como hacer que el canvas se vea completo?
Carlos Eduardo Gomez García
¡Hola! ¿Podrías poner tu código? Así es más fácil ayudarte para ver qué es lo que sucede ^^
José Armando Santiago Mendoza
sería útil que compartieras tu código bro
Adrian Ipalnepohuani Rodriguez Velazquez
Aqui dejo el codigo, pero no creo que sea parte del problema, cuando reviso la consola el canvas tiene un "tamaño muestra" por defecto para mostrar y por lo tanto no aparece completo.
<code> <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Dibujanndo con canvas</title> </head> <body> <h1>Dibujo en canvas</h1> <canvas width="500" heigth="500" id="dibujito"></canvas <script src="dibujo.js"> </script> </body> </html>
<code> var d = document.getElementById("dibujito"); var lienzo = d.getContext("2d"); lienzo.beginPath(); lienzo.strokeStyle = "blue"; lienzo.moveTo(50, 10); lienzo.lineTo(250, 2); lienzo.stroke(); lienzo.closePath(); lienzo.beginPath(); lienzo.strokeStyle = "blue"; lienzo.moveTo(0, 0); lienzo.lineTo(400, 400); lienzo.stroke(); lienzo.closePath(); lienzo.beginPath(); lienzo.strokeStyle = "red"; lienzo.moveTo(50, 10); lienzo.lineTo(250, 10); lienzo.stroke(); lienzo.closePath(); lienzo.beginPath(); lienzo.strokeStyle = "green"; lienzo.moveTo(50, 10); lienzo.lineTo(250, 30); lienzo.stroke(); lienzo.closePath(); lienzo.beginPath(); lienzo.strokeStyle = "black"; lienzo.moveTo(0, 0); lienzo.lineTo(0, 500); lienzo.stroke(); lienzo.moveTo(0, 500); lienzo.lineTo(500, 500); lienzo.stroke(); lienzo.moveTo(500, 500); lienzo.lineTo(500, 0); lienzo.stroke(); lienzo.moveTo(500, 0); lienzo.lineTo(0, 0); lienzo.stroke(); lienzo.closePath();
Adrian Ipalnepohuani Rodriguez Velazquez
Carlos Eduardo Gomez García
Tu error está en tu código
htmlcanvasTienes escrito
heigthheight
Mayra Jessyca Moncayo Galván
Lo primero que noto en el código que compartiste es que la etiqueta canvas no está bien declarada tienes el nombre de la etiqueta escrita pegada al nombre del primer atributo, además de que te falta el signo de mayor que en la etiqueta de cierre:
<canvaswidth="500"heigth="500"id="dibujito"></canvas
Primero separa el nombre de la etiqueta de sus atributos, luego podrías cerrar en esa misma línea la etiqueta ya que no pondrás nada dentro de ella:
<canvas width="500" height="500" id="dibujito"/>
O usando la etiqueta de cierre como lo tienes tú, te falta el signo de mayor que al final:
<canvas width="500" height="500" id="dibujito"></canvas>
Lo mismo haces con la etiqueta script, juntas el nombre de la etiqueta con el nombre de su primer atributo, recuerda mantenerlos separados por un espacio:
<script src="dibujo.js" charset="utf-8"></script>
Prácticamente la estructura debería ser esta:
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Dibujando con canvas</title> </head> <body> <h1>Dibujo en canvas</h1> <canvas id="dibujito" width="300" height="300"/> <p>Así queda tu dibujo</p> <script src="dibujo.js" charset="utf-8"></script> </body> </html>
Mayra Jessyca Moncayo Galván
Una disculpa, no había visto que al poner el código en los comentarios junta el nombre de la etiqueta con el atributo, así que por favor omite mi comentario anterior. Probé tu código y como menciona RetaxMaster el error está en cómo tienes escrito el atributo height, una vez que se escribe correctamente tu código se ejecuta tal cual lo deseas. :)
Adrian Ipalnepohuani Rodriguez Velazquez
RetaxMaster! Efectivamente ese era mi error jajaja muchas gracias!
Adrian Ipalnepohuani Rodriguez Velazquez
MayraMoncayo esos errores que mencionas se crearon al copiar y pegar en Platzi mi codigo esta bien separado y en algun punto borre sin querer el parte del cierre del canvas. Gracias por la respuesta mi error era que tenia escrito mal "height" jaja que cosas ^w^
