HTML <canvas> width-eigenschap

HTML <canvas> Tag

Definitie en gebruik

width De width-eigenschap bepaalt de breedte van het <canvas> element in pixels.

Aanwijzing

Gebruik height-eigenschap Specificeer de hoogte van het <canvas> element in pixels.

Elke keer als je de hoogte of breedte van het canvas opnieuw instelt, wordt de inhoud van het canvas gewist (zie het voorbeeld aan de onderkant van de pagina).

Op onze HTML Canvas Tutorial Leer meer over de <canvas> elementen in onze

Voorbeeld

Voorbeeld 1

Een <canvas> element van 200 pixels hoog en breed:

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

Probeer het zelf

Voorbeeld 2

Door het instellen van de width-eigenschap op 400px het canvas wissen (gebruik 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>

Probeer het zelf

Syntax

<canvas width="pixels">

Eigenschapswaarde

Waarde Beschrijving
pixels Stelt de breedte van het canvas in, uitgedrukt in pixels (bijvoorbeeld “100”). De standaardwaarde is 300.

Browserondersteuning

De cijfers in de tabel vermelden de eerste browserversie die deze eigenschap volledig ondersteunt.

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

HTML <canvas> Tag