O elemento <canvas>
Vamos começar esse tutorial olhando o elemento <canvas> em si.
<canvas id="tutorial" width="150" height="150"></canvas>
Se parece muito com o elemento <img> com a diferença de não possuir os atributos src e alt. O elemento <canvas> tem apenas dois atributos - width e height. Ambos são opcionais e podem ser aplicados utilizando as propriedades DOM respectivas. Se não forem especificados, o canvas será iniciado com 300 pixels de largura por 150 pixels de altura. O elemento pode ser redimensionado por CSS, mas durante a renderização a imagem é escalonada para caber no tamanho do layout.
Nota: Se as suas renderizações parecerem distorcidas, tente especificar os atributos width e height no <canvas> e não usando CSS.
O atributo id não é específico do elemento <canvas> mas um dos atributos padrão do HTML que pode ser aplicado em (quase) todos os elementos HTML (como o class por exemplo). É sempre uma boa ideia inserir um id pois fica muito mais fácil de capturar o elemento no seu script.
O elemento <canvas> pode ser estilizado como qualquer imagem (margem, borda, fundo, etc). Contudo, essas regras não afetarão o desenho no canvas. Nós veremos como isso é feito a seguir nesse tutorial. Quando nenhuma regra de estilo for aplicada, o canvas iniciará totalmente transparente.
Conteúdo alternativo
Uma vez que alguns navegadores mais antigos (em particular, versões do Internet Explorer anteriores a 9) não suportam o elemento <canvas>, você precisará prover um conteúdo alternativo para ser mostrado nesses navegadores.
Isto é muito simples: basta inserir o conteúdo alternativo dentro do elemento <canvas>. Navegadores que não suportam o <canvas> irão renderizar o conteúdo alternativo. Já os navegadores que suportam <canvas> irão ignorar o conteúdo alternativo, renderizando o canvas normalmente.
Por exemplo, podemos prover um texto descritivo do canvas ou uma imagem estática do conteúdo. Algo como isto:
<canvas id="stockGraph" width="150" height="150"> preço das ações: $3.15 +0.15 </canvas> <canvas id="clock" width="150" height="150"> <img src="images/clock.png" width="150" height="150" alt=""/> </canvas>
Tag </canvas> é necessária
Ao contrário do elemento <img>, o elemento <canvas> a tag de fechamento (</canvas>) é necessária.
Nota: Embora as primeiras versões do navegador Safari da Apple não exijam a tag de fechamento, a especificação indica que ela é necessária para que haja maior compatibilidade, portanto não se esqueça de incluí-la. Essas versões do Safari (antes da versão 2.0) irão processar o conteúdo do alternativo, além da própria tela, a menos que você use o CSS para mascará-lo. Felizmente, os usuários dessas versões do Safari são raros hoje em dia.
Se o conteúdo alternativo não for necessário, um simples <canvas id="foo" ...></canvas> é totalmente compatível com todos os navegadores que suportam canvas.
O contexto de renderização
<canvas> cria uma superfície de desenho de tamanho fixo que expõe um ou mais contextos de renderização, que são usados para criar e manipular o conteúdo mostrado. Vamos nos concentrar no contexto de renderização 2D. Outros contextos podem fornecer diferentes tipos de renderização; por exemplo, WebGL usa um contexto 3D ("experimental-WebGL") baseado em OpenGL ES.
Incialmente o canvas é branco. Para mostrar alguma coisa, primeiro um script precisa acessar o contexto de renderização e desenhar sobre ele. O elemento <canvas> tem um método chamado getContext(), usado para obter o contexto de renderização e suas funções de desenho. getContext() recebe o tipo de contexto como parâmetro. Para gráficos 2D, que serão abrangidos nesse tutorial, deverá ser especificado "2d".
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
A primeira linha recupera o nó DOM do elemento <canvas> chamando o método document.getElementById (). Depois de ter o nó do elemento, podemos acessar o contexto de desenho usando o método () getContext.
Verificação de suporte
O conteúdo alternativo é mostrado nos navegadores que não suportam o elemento <canvas>, mas essa checagem pode ser feita através de um script simplesmente testando a presença do método getContext():
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
// codigo de desenho aqui
} else {
// codigo para quando o canvas nao for suportado aqui
}
Um modelo de estrutura
Aqui, um modelo minimalista, que vamos usar como ponto de partida para os exemplos posteriores:
<html>
<head>
<title>Canvas tutorial</title>
<script type="text/javascript">
function draw(){
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
}
}
</script>
<style type="text/css">
canvas { border: 1px solid black; }
</style>
</head>
<body onload="draw();">
<canvas id="tutorial" width="150" height="150"></canvas>
</body>
</html>
O script inclui a função chamada draw(), que é executada uma vez ao término do carregamento da página; este exemplo usa o evento onload do documento. Essa função, ou uma parecida, poderia usar window.setTimeout(), window.setInterval(), ou qualquer outro manipulador de evento, contanto que a página tenha sido carregada primeiro.
Um exemplo simples
Para começar, vamos dar uma olhada num exemplo simples que desenha a interseção de dois retângulos, dos quais um deles tem uma transparência. Exploraremos em mais detalhes o funcionamento nos exemplos posteriores.
<html>
<head>
<script type="application/javascript">
function draw() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);
}
}
</script>
</head>
<body onload="draw();">
<canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>