por qué no podemos establecer el ancho y alto para canvas usando css

¿Por qué el canvas aparece como una escala, cuando el alto y el ancho se especifica en css en lugar de DOM?

Html:

<canvas></canvas> 

Css:

  canvas{ width:100px; height:100px; } 

Puede establecer ancho y alto en canvas usando CSS, pero,

el ancho del canvas, el atributo de altura determina que el píxel real se utilizará para dibujar en el canvas. Se utiliza para el sistema de coorderadas del canvas.

Por otro lado, el ancho / alto de CSS está relacionado con el model de caja.

De forma pnetworkingeterminada, el uso del canvas es de 300 píxeles de ancho y 150 píxeles de alto. Si configura ancho / alto de CSS sin establecer attributes de canvas que se aplicarán en ese 300px / 150px. Imagine una image de 300px / 150px en la que está configurando el ancho / alto usando CSS como 100px / 100px. ¿Lo que sucederá? distorsionará ¿verdad? Lo mismo se aplica para canvass también.

Encontrará más detalles sobre la página de HTML living standard – https://html.spec.whatwg.org/multipage/scripting.html#attr-canvas-width

Espero que respondas tu pregunta.

por lo tanto, piense que el elemento del canvas se compone de dos vistas diferentes.

  1. El elemento html (canvas).
  2. La superficie de dibujo interior del canvas.

Primer enfoque:

Establecer el alto y el ancho del canvas a través de css solo los establecerá en el canvas del elemento html, pero no en la superficie de dibujo interior (esto generalmente es una mala práctica cuando se trata de elementos canvas).

Ahora, normalmente, con este enfoque, cuando el ancho y la altura del elemento es mayor que el ancho y el alto pnetworkingeterminados de la superficie de dibujo, lo que hace el browser es ampliar la superficie del dibujo para encontrar el tamaño del elemento del canvas. Por lo tanto, notará que la superficie de dibujo se acerca.

Segundo enfoque:

Al establecer el alto y el ancho del canvas a través de los attributes de ancho y alto del elemento, configúrelos tanto para el canvas como para la superficie de dibujo. Al igual que,

 <canvas width="300" height="300"></canvas> 

No parece haber nada de malo en la forma en que ha escrito. ¿Has marcado si has vinculado el file CSS correctamente?

Normalmente agrego algo así como

 border: 1px solid; 

a mi CSS para que me permita calcular el ancho y la altura. Puedes revisar mi violín

elemento de canvas tiene attributes de height y width . Asignar valores a través del código javascript:

 var canvas = document.getElementsByTagName('canvas')[0]; canvas.width = 100; canvas.height = 100; 

En cuanto a su pregunta, es porque lo único que cambia el tamaño a través de CSS es el "contenedor" del canvas, no el tamaño del canvas en sí. Cuando intenta dibujar en el canvas con el tamaño de "contenedor" más grande que el tamaño del canvas en sí, la image se verá borrosa.