Canvas does not behave the same, indicating dimensions on the label or in CSS

Question

Canvas does not behave the same, indicating dimensions on the label or in CSS

Navigation

#1 by (0 votes)

2

Currently I am watching an online course on HTML5 and I have come to the part where they explain the operation and all the properties of the Canvas API. All right until at a certain point we begin to make strokes, I realize that I do not leave as in the video even when I have the identical code, or good, almost identical.

We started by making a small drawing of a triangle, at first I was frustrated because I did not appear like the teacher. The teacher in his code while building the structure of the canvas in HTML wrote: <canvas width="500" height="300" id="lienzo"> and I, instead of specifying the width and height of the canvas inside the <canvas> tag what I was doing was specifying it as CSS style using the id="lienzo" that I had placed it, I did it this way because I thought it was the right thing to do.

While I was doing the exercises, I realized that my coordinates did not match those of the teacher and therefore, the exercises did not work out the same, here is the difference that I realized later:

With the width and height specified in 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>

With the width and height specified in the%% HTML_ tag

 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>

I would like someone to clarify this curiosity, since I have searched and at first sight I do not see the difference more than the change in the drawing, before I thought that doing it in both ways was the same, but now I see that no.

html5 css canvas

asked by Samuel 03.09.2017 в 01:42

source

1 answer

PHP - Browse large CSV file with function Can persistent local write permissions be deleted with javaScript?

score 0 · Accepted Answer

This is an adaptation of the SamB response on a similar question from the Stack Overflow site in English. If this answer is useful, and you can vote in the other site, vote there.

It seems that the attributes width and height define the width and height of the coordinate system of canvas , while the properties width and height in CSS define the size of the box in which is going to show.

This is explained in the HTML standard, in any of these two links: one or two (the first one needs JS to work and the second one is very large and it can take a long time to load). In them you can find the following text (my translation):

The canvas element has two attributes to control the bitmap size of the element: width and height . These attributes, when specified, must have values that are non-negative integers Valid The rules to validate valid non-negative integers must be used to obtain its numerical value. If one of the values is missing, or the value validation returns an error, then the default value will be used instead. The width attribute will have a default value of 300, and the height attribute will have a default value of 150.

[...]

Note: a canvas element can be given an arbitrary size using style sheets, then its bitmap will be subject to the property object-fit of CSS.