Tag <canvas>

Definições e uso

A tag <canvas> é usada para desenhar gráficos via scripting (normalmente JavaScript)

A tag <canvas> é transparente, e é somente um container para gráficos, o usuário deve usar um script para desenhar os gráficos em si

Qualquer texto dentro do elemento <canvas> será mostrado em navegadores com JavaScript desativado e em navegadores que não suportam <canvas>

Exemplos


<canvas id="myCanvas">
Seu navegador não tem suporte para a tag canvas.
</canvas>

<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script>


<!DOCTYPE html>
<html>
<body>

<h1>Tag canvas</h1>

<canvas id="myCanvas">
Seu navegador não tem suporte para a tag canvas.
</canvas>

<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script>

</body>
</html>

Resultado

Atributos

Atributo	Valor	Descrição
Height	Pixels	Especifica a altura do canvas. Valor padrão é 150
Width	Pixels	Especifica a largura do canvas. Valor padrão é 300

Esta tag também suporta Atributos Globais.