14. Canvas API

O elemento canvas

A Canvas API permite a você desenhar na tela do navegador via Javascript. O único elemento HTML existente para isso é o elemento canvas, o resto todo é feito via Javascript. Veja como inserir o elemento canvas numa página:

<canvas id="x" width="300" height="300"></canvas>

Isso vai exibir um retângulo vazio. Para desenhar nele, primeiro obtemos o contexto de desenho, com Javascript:

context=document.getElementById('x').getContext('2d')

Existe um contexto 3D?

Ainda não. Existem várias implementações de contexto 3D, e cada fabricante de navegador tem criado a sua, mas ainda não há um padrão do W3C sobre esse assunto.

Agora que temos um contexto, podemos desenhar nele. Vamos começar com um simples retângulo:

context.fillRect(10, 10, 50, 150)

Simples, não? Que tal tentarmos algo um pouco mais complexo? Dê uma olhada no exemplo:

Arquivo: exemplos/14/canvas.html

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4 <meta charset="UTF-8" />
  5 <title>Canvas API</title>
  6 </head>
  7 <body>
  8 
  9 <canvas id="x" width="300" height="300"></canvas>
 10 <button onclick="desenhar()">desenhar</button>
 11 
 12 <script>
 13 function desenhar(){
 14   // Obtemos o contexto
 15   context=document.getElementById('x').getContext('2d')
 16 
 17   //Iniciamos um novo desenho
 18   context.beginPath()
 19 
 20   //Movemos a caneta para o inicio do desenho
 21   context.moveTo(150,50)
 22 
 23   //Desenhamos as linhas
 24   context.lineTo(220,250)
 25   context.lineTo(50,125)
 26   context.lineTo(250,125)
 27   context.lineTo(80,250)
 28   context.lineTo(150,50)
 29 
 30   //O desenho não é de verdade enquanto você
 31   //não mandar o contexto pintá-lo.
 32 
 33   //Vamos pintar o interior de amarelo
 34   context.fillStyle='#ff0'
 35   context.fill()
 36 
 37   //Vamos pintar as linhas de vermelho.
 38   context.strokeStyle='#f00'
 39   context.stroke()
 40 
 41 }
 42 </script>
 43 
 44 </body>
 45 </html>

E veja o que acontece quando se clica no botão:

Exemplo de canvas

Há muito mais para você estudar se quiser se aprofundar na Canvas API. Apenas para que você tenha uma idéia, é possível desenhar texto, sombras, gradientes, incluir imagens no canvas, manipular os pixels, rotacionar e transformar os objetos.

Canvas e SVG

Uma dúvida muito comum é quando usar Canvas, quando usar SVG. Para saber escolher, é preciso entender as diferenças entre um e outro. SVG é vetorial, e baseado em XML, logo, acessível via DOM. Canvas é desenhado pixel a pixel, via Javascript.

Assim, as vantagens do SVG são:

  1. O conteúdo é acessível a leitores de tela
  2. O gráfico é escalável, não perde resolução ou serrilha ao redimensionar
  3. O conteúdo é acessível via DOM

E as vantagens do Canvas:

  1. A performance é muito superior ao SVG na maioria dos casos
  2. É fácil desenhar via Javascript. Em SVG, é preciso fazer seu script escrever XML para você. Com Canvas você só manda desenhar, e pronto.