HTML <canvas> bredd egenskap

HTML <canvas> Tag

Definition och användning

width Egenskapen anger kanvaselementets bredd i pixlar.

Tips

Använd height egenskap Ange kanvaselementets höjd i pixlar.

När du justerar kanvassens höjd eller bredd kommer innehållet att rengöras (se exempel längst ner på sidan).

Vänligen besök vår HTML Canvas-tutorial Lär dig mer om <canvas>-elementet.

Exempel

Exempel 1

Kanvaselement med både bredd och höjd på 200 pixlar:

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

Prova själv

Exempel 2

Genom att sätta bredd egenskapen till 400px kan du rengöra kanvassen (använd 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.bredd = 400;
}
</script>

Prova själv

Syntax

<canvas bredd="pixels">

Egenskapsvärde

Värde Beskrivning
pixels Definierar kanvans bredd i pixel (t.ex. “100”). Standardvärdet är 300.

Webbläsarstöd

Numrerna i tabellen anger den första webbläsaren som helt stöder egenskapen.

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

HTML <canvas> Tag