2

Actualmente me encuentro viendo un curso en línea sobre HTML5 y he llegado a la parte en la que explican el funcionamiento y todas las propiedades de la API Canvas. Todo bien hasta que en cierto punto comenzamos a hacer trazos, me doy cuenta que no me salen como en el video aun cuando tengo el código idéntico, o bueno, casi idéntico.

Hemos comenzado haciendo un pequeño dibujo de un triángulo, al principio me frustraba porque no me aparecía como al profesor. El profesor en su código mientras construía la estructura del canvas en HTML escribía: <canvas width="500" height="300" id="lienzo"> y yo, en vez de especificar el ancho y alto del canvas dentro de la etiqueta <canvas> lo que hacía era especificarlo como estilo CSS usando el id="lienzo" que le había colocado, lo hacía así por qué creía que era lo más correcto.

Mientras iba realizando los ejercicios, me daba cuenta que mis coordenadas no coincidían con las del profesor y por lo tanto, los ejercicios no salían igual, he aquí la diferencia de la que me he dado cuenta luego:

Con el ancho y alto especificado en CSS

window.addEventListener("load",comenzar,false);
    function comenzar(){
        var elemento=document.getElementById("lienzo");
        lienzo=elemento.getContext("2d");
        lienzo.beginPath();
        lienzo.moveTo(20,80);
        lienzo.lineTo(80,80);
        lienzo.lineTo(50,20);
        lienzo.lineTo(20,80);
        lienzo.clip();
        lienzo.beginPath();
        for(i=0;i<250;i+=10){
            lienzo.moveTo(0,i);
            lienzo.lineTo(500,i);
        }
        lienzo.closePath();
        lienzo.stroke();
    }
#lienzo{
            width: 500px;
            height: 300px;
            border: 1px red solid;
        
        }
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <section id="dibujo">
        <canvas id="lienzo">
            Tu navegador no soporta Canvas
        </canvas>
    </section>
</body>
</html>

Con el ancho y alto especificado en la etiqueta <canvas> de HTML

 window.addEventListener("load",comenzar,false);
    function comenzar(){
        var elemento=document.getElementById("lienzo");
        lienzo=elemento.getContext("2d");
        lienzo.beginPath();
        lienzo.moveTo(20,80);
        lienzo.lineTo(80,80);
        lienzo.lineTo(50,20);
        lienzo.lineTo(20,80);
        lienzo.clip();
        lienzo.beginPath();
        for(i=0;i<250;i+=10){
            lienzo.moveTo(0,i);
            lienzo.lineTo(500,i);
        }
        lienzo.closePath();
        lienzo.stroke();
    }
#lienzo{
            /*width: 500px;
            height: 300px;*/
            border: 1px red solid;
        
        }
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <section id="dibujo">
        <canvas id="lienzo" width="500" height="300">
            Tu navegador no soporta Canvas
        </canvas>
    </section>
</body>
</html>

Me gustaría que alguien me pudiera aclarar esta curiosidad, ya que he buscado y a simple vista no veo la diferencia más que el cambio en el dibujo, antes pensaba que haciéndolo de ambas formas era lo mismo, pero ahora veo que no.

2
  • Hola Samuel, bienvenido a Stack Overflow en español. Te recomiendo que completes el recorrido de bienvenida y que leas Cómo preguntar en el centro de ayuda, donde encontrarás consejos para completar esta pregunta y que sea mejor recibida por la comunidad. Por ejemplo, sería bueno que en lugar de incluir imágenes del código, pongas un ejemplo mínimo verificable (algo que puedes hacer pulsando en el icono con el símbolo <>), y si es un tutorial online, podrías enlazar al mismo para que otros usuarios puedan tenerlo como referencia a la hora de responder a tu pregunta.
    – Alvaro Montoro
    Commented el 3 sept. 2017 a las 3:03
  • Gracias por tu ayuda @AlvaroMontoro, he seguido tus recomendaciones y editado la publicación, lo tomaré en cuenta para próximas publicaciones, buen día
    – Samuel
    Commented el 4 sept. 2017 a las 21:07

1 respuesta 1

0

Esto es una adaptación de la respuesta de SamB en una pregunta similar del sitio de Stack Overflow en inglés. Si esta respuesta te sirve, y puedes votar en el otro sitio, vótale allí.

Parece que los atributos width y height definen el ancho y alto del sistema de coordenadas del canvas, mientras que las propiedades width y height en CSS definen el tamaño de la caja en la que se va a mostrar.

Esto se explica en el estándar de HTML, en cualquiera de estos dos enlaces: uno o dos (el primero necesita JS para funcionar y el segundo es muy grande y puede tardar mucho en cargarse). En ellos se puede encontrar el siguiente texto (traducción mía):

El elemento canvas tiene dos atributos para controlar el tamaño del bitmap del elemento: width y height. Estos atributos, cuando se especifican, deben tener valores que sean enteros no-negativos válidos. Las reglas para validar enteros no-negativos válidos deben ser usadas para obtener su valor numérico. Si uno de los valores falta, o la validación del valor devuelve un error, entonces se usará el valor por defecto en su lugar. El atributo width tendrá un valor por defecto de 300, y el atributo height tendrá un valor por defecto de 150.

[...]

Nota: a un elemento canvas se le puede dar un tamaño arbitrario usando hojas de estilo, entonces su bitmap estará sujeto a la propiedad object-fit de CSS.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.