No artigo anterior explicamos o que era o elemento canvas do HTML 5, por isso podemos passar a ver um primeiro exemplo de utilização do mesmo para que os leitores de CriarWeb.com possam ir conhecendo este novo sistema.

Para começar, realizaremos um exemplo de desenho de dois retângulos com distintas cores, que realizaremos utilizando um par de funções do API de desenho em canvas mediante Javascript. Claro que o elemento canvas tem muitas coisas que devemos conhecer para ir nos soltando em seu manejo, mas pelo menos poderemos ver uma primeira prova para ir nos familiarizando.

O exemplo se baseia em duas partes, primeiro uma na qual colocaremos uma tela canvas em um lugar de nossa página, com a etiqueta HTML "CANVAS" e logo outra parte na que desenharemos dentro desse elemento os retângulos com programação Javascript. Resta dizer que farão falta uns conhecimentos ao menos básicos de Javascript para poder trabalhar com o canvas.

Colocar o elemento HTML canvas

Agora comecemos situando dentro do corpo da página a etiqueta CANVAS. Esta etiqueta, como dizíamos faz parte do padrão do HTML 5.

<canvas id="meucanvas" width="200" height="100">
Este texto se mostra para os navegadores não compatíveis com canvas.
<br>
Por favor, utilize Firefox, Chrome, Safari ou Opera.
</canvas>

O elemento tem abertura e fechamento e entre eles podemos escrever um texto que será o que os usuários que entrarem com navegadores que não suportem a etiqueta CANVAS verão.

Para especificar as características deste canvas temos vários atributos:

Atributo id:
Para atribuir-lhe um nome único e logo nos referirmos a este canvas desde Javascript.

Atributos width e height:
Para indicar a largura e altura da área do canvas.

Outros atributos se podem colocar de maneira opcional, como por exemplo style, para indicar atributos de folhas de estilo para definir o aspecto da tela.

Pintar em um canvas mediante Javascript

Existem diversas funções já prontas para desenhar formas e traçados em um canvas. Nós podemos combiná-las para fazer desenhos mais complexos. Porém, neste caso vamos começar desenhando um par de formas simples. Não obstante, como veremos também, devemos fazer antes umas comprovações para saber se o navegador que está executando esta página é compatível com canvas.

Inicialmente o canvas está em branco e quando queremos pintar sobre ele temos que acessar ao contexto de renderizado do canvas, sobre o que poderemos invocar distintos métodos para acessar às funções de desenho. O processo simplificado seria o seguinte:

//Recebemos o elemento canvas
var canvas = document.getElementById('meucanvas');

//Acesso ao contexto de '2d' deste canvas, necessário para desenhar
var contexto = canvas.getContext('2d');

//Desenho no contexto do canvas
contexto.fillRect(50, 0, 10, 150);

Primeiro, com o método getElementById() obtenho o elemento da página que se passa como parâmetro, que é o canvas. Logo, acesso ao contexto 2D do canvas, que é o que tem vários métodos que servem para desenhar na tela. Por último, posso executar tantos métodos como deseje sobre o contexto do canvas para pintar elementos na tela.

Como dizia, estas sentenças Javascript não são compatíveis com todos os navegadores, por isso haverá que fazer umas comprovações básicas, para saber se executar ou não as distintas instruções de desenho. Vejamos este código, um pouco mais elaborado, que faz as comprovações necessárias para não fazer nada no caso que o navegador não seja compatível com canvas.

//Recebemos o elemento canvas
var elemento = document.getElementById('meucanvas');
//Comprovacao sobre se encontramos um elemento
//e podemos extrair seu contexto com getContext(), que indica compatibilidade com canvas
if (elemento && elemento.getContext) {
   //Acesso ao contexto de '2d' deste canvas, necessário para desenhar
   var contexto = elemento.getContext('2d');
   if (contexto) {
      //Se tenho o contexto 2d é que tudo foi bem e posso começar a desenhar
      //Começo desenhando um retângulo
      contexto.fillRect(0, 0, 150, 100);
      //mudo a cor de estilo de desenho a vermelho
      contexto.fillStyle = '#cc0000';
      //desenho outro retângulo
      contexto.fillRect(10, 10, 100, 70);
   }
}

O código está comentado para que se possa entender mais facilmente.

Agora só falta uma última coisa, que é executar estas ações só quando a página estiver completamente carregada e pronta para recebê-las. Isto o conseguimos com o evento onload do body da página:

<body onload="funcionDeDesenho()">

Claro que teremos que criar a funcaoDeDesenho() com o código anterior para operar com o canvas.

Ou também podemos utilizar este outro recurso para atribuir o evento diretamente desde um script Javascript:

window.onload = function(){
   //instruções de desenho em canvas
}

O código completo de nosso primeiro exemplo de uso de canvas seria o seguinte:

<html>
<head>
   <title>Provando canvas</title>
<script>
window.onload = function(){
   //Recebemos o elemento canvas
   var elemento = document.getElementById('meucanvas');
   //Comprovacao sobre se encontramos um elemento
   //e podemos extrair seu contexto com getContext(), que indica compatibilidade com canvas
   if (elemento && elemento.getContext) {
      //Acesso ao contexto de '2d' deste canvas, necessário para desenhar
      var contexto = elemento.getContext('2d');
      if (contexto) {
         //Se tenho o contexto 2d é que tudo foi bem e posso começar a desenhar no canvas
         //Começo desenhando um retângulo
         contexto.fillRect(0, 0, 150, 100);
         //mudo a cor de estilo de desenho a vermelho
         contexto.fillStyle = '#cc0000';
         //desenho outro retângulo
         contexto.fillRect(10, 10, 100, 70);
      }
   }
}

</script>
</head>

<body>

<canvas id="meucanvas" width="200" height="100">
Este texto se mostra para os navegadores não compatíveis com canvas.
<br>
Por favor, utiliza Firefox, Chrome, Safari ou Opera.
</canvas>

</body>
</html>

Podemos ver o exemplo em funcionamento em uma página à parte.