de la lona se estira cuando se utiliza CSS pero normal con propiedades de "ancho"/"altura"

Question

tengo 2 lienzos, uno utiliza atributos HTML width y height al tamaño, la otra utiliza CSS:

<canvas id="compteur1" width="300" height="300" onmousedown="compteurClick(this.id);"></canvas> 
<canvas id="compteur2" style="width: 300px; height: 300px;" onmousedown="compteurClick(this.id);"></canvas> 

displays Compteur1 como debería, pero no compteur2. El contenido se dibuja usando JavaScript en un lienzo de 300x300.

¿Por qué hay una diferencia de visualización?

Answer 1

parece que el width y height atributos determinan la anchura o la altura de la tela del sistema de coordenadas, mientras que las propiedades CSS solo determinan el tamaño de la caja en la que se mostrará.

Esto se explica en http://www.whatwg.org/html#attr-canvas-width (necesita JS) o http://www.whatwg.org/c#attr-canvas-width (probablemente va a comer su computadora):

El elemento canvas tiene dos atributos para controlar el tamaño del mapa de bits del elemento: width y height. Estos atributos, cuando se especifiquen, deben tener valores que sean enteros válidos no negativos. Las reglas para analizar enteros no negativos se deben usar para obtener sus valores numéricos. Si falta un atributo, o si al analizar su valor devuelve un error, se debe usar el valor predeterminado en su lugar. Los width de atributos por defecto es 300, y los valores por defecto de los atributos height a 150.

Answer 2

Para establecer el width y height que necesita, puede utilizar

canvasObject.setAttribute('width', '475'); 

Answer 3

La tela se estira si se establece el ancho y altura en tu CSS. Si se quiere manipular dinámicamente la dimensión de la tela tiene que usar JavaScript, así:

canvas = document.getElementById('canv'); 
canvas.setAttribute('width', '438'); 
canvas.setAttribute('height', '462'); 

Answer 4

Para <canvas> elementos, las reglas CSS para width y height establecer el tamaño real del elemento de tela que será dibujado a la página. Por otro lado, los atributos HTML de width y height establecen el tamaño del sistema de coordenadas o 'cuadrícula' que utilizará la API de lienzo.

Por ejemplo, considere esto (jsfiddle):

var ctx = document.getElementById('canvas1').getContext('2d'); 
 
ctx.fillStyle = "red"; 
 
ctx.fillRect(10, 10, 30, 30); 
 

 
var ctx2 = document.getElementById('canvas2').getContext('2d'); 
 
ctx2.fillStyle = "red"; 
 
ctx2.fillRect(10, 10, 30, 30);

canvas { 
 
    border: 1px solid black; 
 
}

<canvas id="canvas1" style="width: 50px; height: 100px;" height="50" width="100"></canvas> 
 
<canvas id="canvas2" style="width: 100px; height: 100px;" height="50" width="100"></canvas>

Ambos han tenido la misma cosa dibujado en ellas relativa a las coordenadas internas del elemento canvas. Pero en el segundo lienzo, el rectángulo rojo será el doble de ancho porque el lienzo como un todo se extiende a través de un área más grande por las reglas de CSS.

Nota: Si no se especifican las reglas CSS para width y/o height, el navegador utilizará los atributos HTML para ajustar el tamaño del elemento de modo que 1 unidad de estos valores sea igual a 1px en la página.Si no se especifican estos atributos, se establecerán por defecto en width de 300 y height de 150.

Answer 5

El navegador usa el ancho y la altura del CSS, pero el elemento del lienzo se escala en función del ancho y la altura del lienzo. En javascript, lea el ancho y alto de css y configure el ancho y la altura del lienzo.

var myCanvas = $('#TheMainCanvas'); 
myCanvas[0].width = myCanvas.width(); 
myCanvas[0].height = myCanvas.height(); 

Answer 6

Shannimal corrección

var el = $('#mycanvas'); 
el.attr('width', parseInt(el.css('width'))) 
el.attr('height', parseInt(el.css('height'))) 

Answer 7

Si desea un comportamiento dinámico basado en, por ejemplo, Consultas de medios CSS, no use atributos de ancho y alto de lienzo. Utilice reglas CSS y luego, antes de obtener el contexto de representación de la lona, ​​asignar a la anchura y la altura de los atributos de la anchura y altura de CSS estilos:

var elem = document.getElementById("mycanvas"); 

elem.width = elem.style.width; 
elem.height = elem.style.height; 

var ctx1 = elem.getContext("2d"); 
...