Ancho y alto del lienzo en HTML5

Hola, descubrimos la respuesta a tu búsqueda, continúa leyendo y la obtendrás aquí.

Solución:

los canvas El elemento DOM tiene .height y .width propiedades que corresponden a la height="…" y width="…" attributes. Configúrelos en valores numéricos en 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 con ctx.clearRect( 0, 0, ctx.canvas.width, ctx.canvas.height); para manejar los navegadores que no borran completamente el lienzo. Deberá volver a dibujar cualquier contenido que desee 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 diferente desde el style.height y style.width CSS attributes. Si no configura el CSS attributes, el tamaño intrínseco del lienzo se utilizará como tamaño de visualización; si configura el CSS attributes, 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 con zoom 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 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 mediante el lienzo. attributes. En HTML

O en JavaScript

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

Separados de eso están el ancho y alto 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";

Podría decirse que la mejor manera de hacer un lienzo de 1×1 píxeles es UTILICE SIEMPRE CSS para elegir el tamaño, luego escriba un poco de JavaScript para que la cantidad 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 

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

Aquí hay un lienzo de ventana completo:

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 

body  margin: 0; 
canvas  display: block; width: 100vw; height: 100vh; 

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

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) 

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

canvas 
   width: 100%;
   height: 100%;

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.



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.

Aquí hay un lienzo en un panel de control de tamaño considerable.

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 

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

  

     
  
  

  
  
  

     
* controls
* go 
* here

<- drag this
     



aquí hay un lienzo como fondo

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




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.


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.



Porque no configuré el attributes 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 para restar del número de dimensiones del elemento es problemático


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

Con la adición del 'medio píxel' se logra el truco para desenfocar las líneas.
 valoraciones y reseñas
Si sostienes algún recelo y forma de avanzar nuestro escrito eres capaz de ejecutar una apostilla y con mucho placer lo analizaremos.





¡Haz clic para puntuar esta entrada!
(Votos: 0  Promedio: 0)
Tags : Canvas  /  Html  / 
Utiliza Nuestro Buscador
Preguntas Relacionadas:
ejemplo de código html5 de ancho y alto de tabla estándar
Inspector de lienzo HTML5?
React Native adapta el ancho de la imagen mientras que la…
Cambiar el tamaño de una imagen en un lienzo HTML5
Ancho y alto del carrusel Bootstrap
¿Cómo se obtiene el ancho y el alto de una imagen SVG en…
Abriendo imágenes en NodeJS y averiguando ancho/alto
ancho y alto del botón en el ejemplo de código html
iframe ancho 100 alto ejemplo de código automático
WPF: establecer el ancho (y el alto) como un valor de…
CSS: ¿estirar la imagen de fondo al 100% del ancho y alto de…
¿Cómo determino el ancho y el alto de una imagen en Flutter?