Tag HTML <canvas>
Exemplo
Desenhe um retângulo vermelho na hora e mostre-o dentro do elemento <canvas>:
<canvas id="myCanvas">
Your browser
does not support the canvas tag.
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script>
Mais exemplos de "Experimente você mesmo" abaixo.
Definição e uso
A <canvas>tag é usada para desenhar gráficos, em tempo real, por meio de scripts (geralmente JavaScript).
A <canvas>tag é transparente, e é apenas um container para gráficos, você deve usar um script para realmente desenhar os gráficos.
Qualquer texto dentro do <canvas>elemento será exibido em navegadores com JavaScript desabilitado e em navegadores que não suportam <canvas>.
Dicas e Notas
Dica: saiba mais sobre o <canvas>elemento em nosso
Tutorial HTML Canvas .
Dica: Para uma referência completa de todas as propriedades e métodos, visite nossa Referência do HTML Canvas .
Suporte ao navegador
Os números na tabela especificam a primeira versão do navegador que suporta totalmente o elemento.
| Element | |||||
|---|---|---|---|---|---|
| <canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
Atributos
| Attribute | Value | Description |
|---|---|---|
| height | pixels | Specifies the height of the canvas. Default value is 150 |
| width | pixels | Specifies the width of the canvas Default value is 300 |
Atributos Globais
A <canvas>tag também suporta os Atributos Globais em HTML .
Atributos do evento
A <canvas>tag também suporta os atributos de evento em HTML .
Mais exemplos
Exemplo
Outro exemplo de <canvas>:
<canvas id="myCanvas">
Your browser does not
support the canvas tag.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20,
20, 75, 50);
//Turn transparency on
ctx.globalAlpha = 0.2;
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);
ctx.fillStyle
= "green";
ctx.fillRect(80, 80, 75, 50);
</script>
Configurações padrão de CSS
A maioria dos navegadores exibirá o <canvas>elemento com os seguintes valores padrão:
Exemplo
canvas {
height: 150px;
width: 300px;
}