Ancho y alto del lienzo en HTML5

181

¿Es posible arreglar el ancho y la altura de un canvaselemento HTML5 ?

La forma habitual es la siguiente:

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

html canvas

— Dustin
fuente

380

El canvaselemento DOM tiene .heighty .widthpropiedades que corresponden a los atributos height="…"y width="…". Ajústelos a valores numéricos en el código JavaScript para cambiar el tamaño de su lienzo. Por ejemplo:

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

Tenga en cuenta que esto borra el lienzo, aunque debe seguir ctx.clearRect( 0, 0, ctx.canvas.width, ctx.canvas.height);para manejar los navegadores que no borran completamente el lienzo. Deberá volver a dibujar el contenido que desea que se muestre después del cambio de tamaño.

Tenga en cuenta además que la altura y el ancho son las dimensiones lógicas del lienzo utilizadas para dibujar y son diferentes de los atributos style.heighty style.widthCSS. Si no establece los atributos CSS, el tamaño intrínseco del lienzo se usará como su tamaño de visualización; si configura los atributos CSS y difieren de las dimensiones del lienzo, 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 lienzo que se amplía 4x.

Mostrar fragmento de código

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 }

<canvas width="100" height="40"></canvas>
<p>Showing that re-drawing the same antialiased lines does not obliterate old antialiased lines.</p>

Expandir fragmento

— Phrogz
fuente

1

@Hazaart Si desea configurarlos de manera diferente: $('#mycanvas').attr({width:400,height:300}).css({width:'800px',height:'600px'});si desea que el tamaño visual sea el mismo que el tamaño de píxel, nunca configure los estilos, solo los atributos.

— Phrogz

1

"Si desea que el tamaño visual sea el mismo que el tamaño del píxel, nunca configure los estilos, solo los atributos", ¿hay alguna razón para esta preferencia? Si tengo muchos objetos en el lienzo y quiero acercar / alejar, sería mucho más rápido restablecer el CSS, ¿no? (En lugar de recorrer todos los objetos) ...

— InglésAdam

3

@Gamemorize: el zoom a través de CSS lo hace borroso. Sin embargo, puede hacer zoom mediante la escala de contexto y la traducción entre redibujos en lugar de cambiar el "tamaño" de cada objeto.

— Phrogz

1

Gracias muy apreciado. Ahora veo lo que CSS está haciendo ... trata el lienzo 'como' una imagen, escalar una imagen obviamente no es tan bueno como 'volver a dibujarla'.

— InglésAdam

3

Además, ahora puede hacer un "acercamiento claro y pixelado" en lugar de "acercamiento borroso y pixelado", al menos en Chrome, usando el estilo "representación de imagen: pixelado" en el lienzo. Toqué tu violín para mostrar la diferencia: jsfiddle.net/donhatch/9bheb/1663

— Don Hatch

62

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

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

O en JavaScript

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

Separado de eso están el ancho y la altura del estilo CSS del lienzo

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 hacer un lienzo de 1x1 píxeles es SIEMPRE UTILIZAR 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 lienzo de ventana completa:

Mostrar fragmento de código

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; }

<canvas id="c"></canvas>

Expandir fragmento

Y aquí hay un lienzo como flotador en un párrafo

Mostrar fragmento de código

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;
}

span { 
   width: 250px; 
   height: 100px; 
   float: left; 
   padding: 1em 1em 1em 0;
   display: inline-block;
}
canvas {
   width: 100%;
   height: 100%;
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent cursus venenatis metus. Mauris ac nibh at odio scelerisque scelerisque. Donec ut enim <span class="diagram"><canvas id="c"></canvas></span>
vel urna gravida imperdiet id ac odio. Aenean congue hendrerit eros id facilisis. In vitae leo ullamcorper, aliquet leo a, vehicula magna. Proin sollicitudin vestibulum aliquet. Sed et varius justo.
<br/><br/>
Quisque tempor metus in porttitor placerat. Nulla vehicula sem nec ipsum commodo, at tincidunt orci porttitor. Duis porttitor egestas dui eu viverra. Sed et ipsum eget odio pharetra semper. Integer tempor orci quam, eget aliquet velit consectetur sit amet. Maecenas maximus placerat arcu in varius. Morbi semper, quam a ullamcorper interdum, augue nisl sagittis urna, sed pharetra lectus ex nec elit. Nullam viverra lacinia tellus, bibendum maximus nisl dictum id. Phasellus mauris quam, rutrum ut congue non, hendrerit sollicitudin urna.
</p>

Expandir fragmento

Aquí hay un lienzo en un panel de control considerable

Mostrar fragmento de código

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;
}

// ----- the code above related to the canvas does not change ----
// ---- the code below is related to the slider ----
const $ = document.querySelector.bind(document);
const left = $(".left");
const slider = $(".slider");
let dragging;
let lastX;
let startWidth;

slider.addEventListener('mousedown', e => {
 lastX = e.pageX;
 dragging = true;
});

window.addEventListener('mouseup', e => {
 dragging = false;
});

window.addEventListener('mousemove', e => {
  if (dragging) {
    const deltaX = e.pageX - lastX;
    left.style.width = left.clientWidth + deltaX + "px";
    lastX = e.pageX;
  }
});

body { 
  margin: 0;
}
.frame {
  display: flex;
  align-items: space-between;
  height: 100vh;
}
.left {
  width: 70%;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}  
canvas {
  width: 100%;
  height: 100%;
}
pre {
  padding: 1em;
}
.slider {
  width: 10px;
  background: #000;
}
.right {
  flex 1 1 auto;
}

<div class="frame">
  <div class="left">
     <canvas id="c"></canvas>
  </div>
  <div class="slider">
  
  </div>
  <div class="right">
     <pre>
* controls
* go 
* here

&lt;- drag this
     </pre>
  </div>
</div>

Expandir fragmento

aquí hay un lienzo como fondo

Mostrar fragmento de código

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;  
  position: fixed;
}
#content {
  position: absolute;
  margin: 0 1em;
  font-size: xx-large;
  font-family: sans-serif;
  font-weight: bold;
  text-shadow: 2px  2px 0 #FFF, 
              -2px -2px 0 #FFF,
              -2px  2px 0 #FFF,
               2px -2px 0 #FFF;
}

<canvas id="c"></canvas>
<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent cursus venenatis metus. Mauris ac nibh at odio scelerisque scelerisque. Donec ut enim vel urna gravida imperdiet id ac odio. Aenean congue hendrerit eros id facilisis. In vitae leo ullamcorper, aliquet leo a, vehicula magna. Proin sollicitudin vestibulum aliquet. Sed et varius justo.
</p>
<p>
Quisque tempor metus in porttitor placerat. Nulla vehicula sem nec ipsum commodo, at tincidunt orci porttitor. Duis porttitor egestas dui eu viverra. Sed et ipsum eget odio pharetra semper. Integer tempor orci quam, eget aliquet velit consectetur sit amet. Maecenas maximus placerat arcu in varius. Morbi semper, quam a ullamcorper interdum, augue nisl sagittis urna, sed pharetra lectus ex nec elit. Nullam viverra lacinia tellus, bibendum maximus nisl dictum id. Phasellus mauris quam, rutrum ut congue non, hendrerit sollicitudin urna.
</p>
</div>

Expandir fragmento

Como no configuré los atributos, lo único que cambió en cada muestra es el CSS (en lo que respecta al lienzo)

Notas:

No coloque bordes ni relleno en un elemento de lienzo. Calcular el tamaño a restar del número de dimensiones del elemento es problemático

— gman
fuente

La mejor respuesta, este fragmento debe ser un método de lienzo DOM estándar.

— rustypaper

23

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

<canvas id="graph" width=326 height=240 style='width:326px;height:240px'></canvas>

Con la adición del 'medio píxel', el truco es desenfocar líneas.

— usuario1463699
fuente

26

@UpTheCreek Si dibuja una línea en el lienzo, se ve más oscura que debería, como si estuviera borrosa. Al poner las líneas en medio píxel (por ejemplo, 50.5 en lugar de 50) se obtiene una línea bonita y limpia. Esto a menudo se hace usando ctx.translate (0.5, 0.5) al comienzo de su código para que pueda olvidarse de él después

— Johan

-2

La mejor manera de hacerlo:

<canvas id="myChart" style="height: 400px; width: 100px;"></canvas>

— rohan parab
fuente