HTML Attributo width del canvas

Etichetta HTML <canvas>

Definizione e utilizzo

Attributo width L'attributo definisce la larghezza dell'elemento <canvas> in pixel.

Suggerimento

Utilizza Attributo height Specifica l'altezza dell'elemento <canvas> in pixel.

Ogni volta che si resetta l'altezza o la larghezza della superficie di disegno, il contenuto della superficie viene svuotato (vedi l'esempio in fondo alla pagina).

Visita la nostra Tutorial del canvas HTML Impara di più sugli elementi <canvas> in questo modulo.

Esempio

Esempio 1

Elemento <canvas> di altezza e larghezza di 200 pixel:

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

Prova da solo

Esempio 2

Attraverso la impostazione dell'attributo width a 400px, è possibile svuotare la superficie di disegno (utilizzando 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>

Prova da solo

Sintassi

<canvas width="pixels">

Valore dell'attributo

Valore Descrizione
pixels Definire la larghezza del canvas in pixel (ad esempio “100”).Il valore predefinito è 300.

Supporto del browser

I numeri nella tabella indicano la versione del browser che supporta completamente questa proprietà.

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

Etichetta HTML <canvas>