Ancho y altura del canvas en HTML5

¿Es posible arreglar el ancho y alto de un elemento canvas HTML5?

La forma habitual es la siguiente:

  

El elemento DOM de canvas tiene propiedades .height y .width que corresponden a los atributos height="…" y width="…" . Configúrelos en valores numéricos en código JavaScript para cambiar el tamaño de su canvas. Por ejemplo:

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

Tenga en cuenta que esto borra el canvas, aunque debe seguir con ctx.clearRect( 0, 0, ctx.canvas.width, ctx.canvas.height); para manejar aquellos navegadores que no borran completamente el canvas. Tendrá que volver a dibujar cualquier contenido que desee mostrar después del cambio de tamaño.

Tenga en cuenta además que la altura y el ancho son las dimensiones de canvas lógico utilizadas para el dibujo y son diferentes de los style.height style.width style.height y style.width . Si no establece los atributos CSS, el tamaño intrínseco del canvas se usará como su tamaño de visualización; si establece los atributos CSS, y difieren de las dimensiones del canvas, su contenido se escalará en el navegador. Por ejemplo:

 // Make a canvas that has a blurry pixelated zoom-in // with each canvas pixel drawn showing as roughly 2x2 on screen canvas.width = 400; canvas.height = 300; canvas.style.width = '800px'; canvas.style.height = '600px'; 

Vea este ejemplo en vivo de un canvas que se amplía por 4x.

 var c = document.getElementsByTagName('canvas')[0]; var ctx = c.getContext('2d'); ctx.lineWidth = 1; ctx.strokeStyle = '#f00'; ctx.fillStyle = '#eff'; ctx.fillRect( 10.5, 10.5, 20, 20 ); ctx.strokeRect( 10.5, 10.5, 20, 20 ); ctx.fillRect( 40, 10.5, 20, 20 ); ctx.strokeRect( 40, 10.5, 20, 20 ); ctx.fillRect( 70, 10, 20, 20 ); ctx.strokeRect( 70, 10, 20, 20 ); ctx.strokeStyle = '#fff'; ctx.strokeRect( 10.5, 10.5, 20, 20 ); ctx.strokeRect( 40, 10.5, 20, 20 ); ctx.strokeRect( 70, 10, 20, 20 ); 
 body { background:#eee; margin:1em; text-align:center } canvas { background:#fff; border:1px solid #ccc; width:400px; height:160px } 
  

Showing that re-drawing the same antialiased lines does not obliterate old antialiased lines.

Un canvas tiene 2 tamaños, la dimensión de los píxeles en el canvas (es backingstore o drawingBuffer) y el tamaño de visualización. La cantidad de píxeles se establece utilizando los atributos del canvas. En HTML

  

O en JavaScript

 someCanvasElement.width = 400; someCanvasElement.height = 300; 

Separados de eso están el ancho y la altura del estilo CSS del canvas

En CSS

 canvas { /* or some other selector */ width: 500px; height: 400px; } 

O en JavaScript

 canvas.style.width = "500px"; canvas.style.height = "400px"; 

La mejor manera de crear un canvas de 1×1 píxeles es usar SIEMPRE CSS para elegir el tamaño y luego escribir un poco de JavaScript para que el número de píxeles coincida con ese tamaño.

 function resizeCanvasToDisplaySize(canvas) { // look up the size the canvas is being displayed const width = canvas.clientWidth; const height = canvas.clientHeight; // If it's resolution does not match change it if (canvas.width !== width || canvas.height !== height) { canvas.width = width; canvas.height = height; return true; } return false; } 

¿Por qué es esta la mejor manera? Porque funciona en la mayoría de los casos sin tener que cambiar ningún código.

Aquí hay un canvas de ventana completa:

 const ctx = document.querySelector("#c").getContext("2d"); function render(time) { time *= 0.001; resizeCanvasToDisplaySize(ctx.canvas); ctx.fillStyle = "#DDE"; ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height); ctx.save(); const spacing = 64; const size = 48; const across = ctx.canvas.width / spacing + 1; const down = ctx.canvas.height / spacing + 1; const s = Math.sin(time); const c = Math.cos(time); for (let y = 0; y < down; ++y) { for (let x = 0; x < across; ++x) { ctx.setTransform(c, -s, s, c, x * spacing, y * spacing); ctx.strokeRect(-size / 2, -size / 2, size, size); } } ctx.restore(); requestAnimationFrame(render); } requestAnimationFrame(render); function resizeCanvasToDisplaySize(canvas) { // look up the size the canvas is being displayed const width = canvas.clientWidth; const height = canvas.clientHeight; // If it's resolution does not match change it if (canvas.width !== width || canvas.height !== height) { canvas.width = width; canvas.height = height; return true; } return false; } 
 body { margin: 0; } canvas { display: block; width: 100vw; height: 100vh; } 
  

¡Muchas gracias! Finalmente resolví el problema de píxeles borrosos con este código:

más el truco de ‘medio píxel’ para desenredar las líneas.