Tutorial de Canvas – Parte 1 – Uso básico do Canvas

Este é o primeiro artigo de uma série que irá apresentar os recursos disponibilizados pela nova tag <canvas> do HTML5. Nesse artigo, veremos alguns exemplos de uso básico do Canvas. Você pode acessar uma lista de todos os artigos da série nesse link.

Índice do conteúdo

  1. O elemento <canvas>
  2. Contéudo reserva
  3. A tag </canvas> necessária
  4. O contexto de renderização
  5. Verificando por suporte
  6. Um modelo de esquema
  7. Um exemplo simples

O elemento <canvas>

Vamos começar esse artigo dando uma olhada no elemento  <canvas> propriamente dito.

<canvas id="tutorial" width="150" height="150"></canvas>

Ele se parece muito com o elemento  <img>, sendo que a única diferença é ela não ter os atributos src e alt. O elemento <canvas> possui apenas dois atributos – width e height. Esses dois atributos são opcionais e podem ser configurados pelo uso das propriedades do DOM. Quando nenhum atributo width ou height é especificado, o canvas será configurado com um comprimento de 300 pixels e uma altura de 150 pixels. O elemento pode ser dimensionado arbitrariamente pelo  CSS, mas durante a renderização da imagem ele é escalonado para caber no tamanho do layout.

Nota: Se sua renderização ficar distorcida, tente especificar seus atributo width e height de forma explícita, e não usando o CSS.

O atributo id não é específico do elemento  <canvas> mas é um dos atributo padrão do HTML que podem ser aplicados a quase todos os elementos do HTML (como o atributo class por exemplo). É sempre uma boa idéia fornecer um  id porque torna muito fácil a identificação dele em nosso script.

O elemento <canvas> pode ser estilizado de forma similar a qualquer imagem (margem, borda, fundo, etc). Esses regras, porém, não afetam os desenhos feitos no canvas. Veremos como isso é feito mais a frente nesse artigo. Quando nenhuma regra de estilo é aplicada ao canvas, ele será definido como totalmente transparente.

Conteúdo reserva

Como alguns navegadores antigos (em particular, algumas versões do Internet Explorer anteriores a versão 9) não suportam o elemento  <canvas> , você deve fornecer um conteúdo reserva para ser exibido nesses navegadores.

Isso é bem direto: apenas fornecemos algum conteúdo alternativo dentro do elemento <canvas>. Navegadores que não suportem  <canvas> irão ignorar o contêiner e renderizar o conteúdo reserva contido dentro dele. Navegadores que suportem  <canvas> irão ignorar o conteúdo interno ao contêiner e apenas renderizarão o canvas normalmente.

Por exemplo, podemos fornecer uma descrição em texto do conteúdo do canvas ou uma imagem estática do conteúdo renderizado dinamicamente. Isso deve ficar dessa foma:

<canvas id="stockGraph" width="150" height="150">
  current stock price: $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> necessita de uma tag de fechamento (</canvas>).

Nota: Apensar de versões antigas do navegador da Apple, o Safari, não precisarem da tag de fechamento, a especificação indica que ela é necessária, assim você deve se certificar de inclui-la para uma compatibilidade mais ampla. Essas versões do Safari (anteriores a versão 2.0) irão renderizar o conteúdo reserva junto com o canvas a menos que você use algum truque de CSS para mascara-lo. Felizmente, usuários dessas versões do Safari são raridade atualmente.

Se conteúdo reserva 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

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 exibido. Focaremos em um contexto de renderização 2D. Outros contexto podem fornecer diferentes tipos de renderização; por exemplo, o WebGL usa um contexto 3D (“experimental-webgl“) baseado no OpenGL ES.

O canvas é incialmente preenchido com um espaço em branco.  Para exibir algo, um script precisa acessar o contexto de renderização e desenhar nele. O elemento <canvas> possui um método chamado getContext(), usado para obter o contexto de renderização e suas funções de desenho. O método getContext() pede um parâmetro, o tipo do contexto. Para gráficos 2D, como os cobertos por esse artigo, você deve especificar “2d”.

var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');

A primeira linha recupera o nó do DOM para o elemento <canvas> através da chamado ao método document.getElementById(). Uma vez que você possua o nó do elemento, pode acessar seu contexto de desenho usando o método getContext().

Verificando por suporte

O conteúdo reserva é exibido por navegadores que não suportem a tag <canvas>. Scripts também podem verificar por suporte de forma programática simplesmente testando a presença do método getContext(). Nosso trecho de código acima ficaria assim:

var canvas = document.getElementById('tutorial');

if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  // drawing code here
} else {
  // canvas-unsupported code here
}

Um modelo de esquema

A seguir um model minimalista de um esquema que usaremos como ponto de partida para os próximos exemplos dessa série de artigos.

<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 uma função chamada draw(), que é executada quando a página termina de ser carregada; isso é feito pelo uso do evento load no documento. Essa função, ou uma parecida, pode ser chamada também pelo uso dos métodoswindow.setTimeout(), window.setInterval(), ou qualquer outro manipulador de eventos, desde que a página tenha sido carregada completamente.

A seguir o que o modelo acima deve exibir na prática:

Um exemplo simples

Para começar, vamos dar uma olhada em um exemplo simples que desenha dois retângulos que se interceptam, um deles possuindo transparência alpha; Exploraremos como isso funcionada em mais detalhes nos próximo artigos.

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

Esse exemplo será exibido dessa forma

Screenshot Live sample