Propriedade width do HTML <canvas>

Etiqueta HTML <canvas>

Definição e uso

width A propriedade width define a largura do elemento <canvas> em pixels.

Dica

Use Propriedade height Especifique a altura do elemento <canvas> em pixels.

Cada vez que você ajustar a altura ou largura do canvas, o conteúdo do canvas será limpo (veja o exemplo na parte inferior da página).

Por favor, consulte nossa Tutorial de Canvas HTML Aprenda mais sobre o elemento <canvas> neste módulo.

Exemplo

Exemplo 1

Elemento <canvas> de 200 pixels de altura e largura:

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

Experimente você mesmo

Exemplo 2

Ao ajustar a propriedade width para 400px, limpe o canvas (usando 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>

Experimente você mesmo

Sintaxe

<canvas width="pixels">

Valor do atributo

Valor Descrição
pixels Define a largura da tela, em pixels (por exemplo, “100”). O valor padrão é 300.

Suporte do navegador

Os números na tabela indicam a versão do navegador que suporta plenamente essa propriedade.

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

Etiqueta HTML <canvas>