Utilização básica do Canvas

Vamos começar este tutorial olhando para o elemento <canvas> HTML em si. No final desta página, você saberá como configurar um contexto de canvas 2D e desenhar um primeiro exemplo em seu navegador.

O elemento <canvas>

Vamos começar esse tutorial olhando o elemento <canvas> em si.

html
<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 (en-US) 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:

html
<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.

Inicialmente 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 (en-US) 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".

js
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():

js
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:

Nota: não é uma boa prática incorporar um script dentro do HTML. Nós fazemos isso aqui para manter o exemplo conciso.

html
<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() (en-US), window.setInterval() (en-US), ou qualquer outro manipulador de evento, contanto que a página tenha sido carregada primeiro.

Um simples exemplo

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
<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>

Este exemplo parece assim:

ScreenshotLive sample