Atributo width de HTML <canvas>

Etiqueta HTML <canvas>

Definición y uso

Ancho La propiedad especifica el ancho del elemento <canvas> en píxeles.

Sugerencia

Por favor, usa Atributo height Especifica la altura del elemento <canvas> en píxeles.

Cada vez que se ajuste la altura o anchura del lienzo, el contenido del lienzo se borrará (véase el ejemplo en la parte inferior de la página).

Por favor, consulta nuestra Tutoriales de HTML Canvas Aprende más sobre el elemento <canvas> aquí.

Ejemplo

Ejemplo 1

Elemento <canvas> de 200 píxeles de altura y anchura:

<canvas id="myCanvas" width="400" height="400" style="border:1px solid">

Prueba por tu cuenta

Ejemplo 2

Al establecer la propiedad width en 400px, se puede limpiar el lienzo (utilizando JavaScript):

<canvas id="myCanvas" width="200" height="200" style="border:1px solid"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#0192B9";
ctx.fillRect(50, 50, 300, 300);
function clearCanvas() {
  c.width = 400;
}
</script>

Prueba por tu cuenta

Sintaxis

<canvas width="pixels">

Valor de atributo

Valor Descripción
pixels Define el ancho del lienzo en píxeles (por ejemplo, "100"). El valor predeterminado es 300.

Compatibilidad del navegador

Los números en la tabla indican la versión del navegador que admite completamente la propiedad por primera vez.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 2.0 3.1 9.0

Etiqueta HTML <canvas>