Propriété width de l'HTML <canvas>

Balise HTML <canvas>

Définition et utilisation

width La propriété width détermine la largeur de l'élément <canvas> en pixels.

Avis

Utilisez Propriété height Définir la hauteur de l'élément <canvas> en pixels.

Lorsque vous réinitialisez la hauteur ou la largeur du canevas, le contenu du canevas est effacé (voir l'exemple en bas de page).

Veuillez consulter notre Tutoriel HTML Canvas Pour en apprendre davantage sur l'élément <canvas>.

Exemple

Exemple 1

Un élément <canvas> de 200 pixels de hauteur et de largeur :

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

Essayer par vous-même

Exemple 2

En ajustant la propriété width à 400px pour effacer le canevas (en utilisant 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>

Essayer par vous-même

Syntaxe

<canvas width="pixels">

Valeur de l'attribut

Valeur Description
pixels Définir la largeur du canevas en pixels (par exemple “100”). La valeur par défaut est 300.

Support du navigateur

Les numéros dans le tableau indiquent la version du navigateur qui prend en charge cette propriété pour la première fois.

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

Balise HTML <canvas>