O HTML5 ajuda o navegador a interpretar um aplicativo dinâmico de forma artística e interativa, o que anteriormente era resolvido com aplicativos desktop como o Qt ou Cairo. Podemos citar como exemplo o site do desenvolvedor Marius Watz, que possui um gráfico alterando permanentemente o canvas com movimentos de flâmulas coloridas. Os códigos JavaScript também auxiliam o HTML5, atraindo novos recursos visuais com o pressionar de um botão. O elemento canvas do HTML, em que este artigo se baseia, finalmente dá aos web designers uma ferramenta interativa e livre para desenho – e em quase qualquer plataforma, como você pode ver a partir da lista presente na tabela 1.

Tabela 1: Compatibilidade de navegadores

Navegador	Sistema Operacional	Canvas (versão)	Canvas 3D/WebGL	SVG(versão)	Inline SVG (versão)	Canvas e SVG (data da versão)
Android	Android	2.1	–	3.0	3.0	02/2011
Chrome	Linux, OS X, Windows	3.0	9	1.0	7.0	10/2009
Firefox	Linux, OS X, Windows	1.5	4.0	1.5/2	4.0	10/2006
Firefox Mobile	Android, iPhone	4 Beta	–	4 Beta	4 Beta	em Beta
Internet Explorer	Windows	9	–	9	9	03/2011
Opera	Linux, OS X, Windows	9.0	11	8 (SVG Tiny), 9	12	06/2006
Opera Mini	Android, iPhone, Windows Mobile (exceto Windows 7)	5.0 (parcial)	–	4 (limitado)	–	08/2009
Opera Mobile	Vários sistemas	10., Text: 11.0	–	10.0	–	03/2010
Safari	OS X, Windows	3.1	5.2	3.2	5.1	11/2008
Safari (iPhone)	iPhone	3.2	–	3.1	–	08/2010
Windows Phone 7	Windows Phone 7	7.5	–	7.5	7.5	Obsoleto em 2011

Adoção tardia do XML e do SVG

Efeitos semelhantes podem ser alcançados usando JavaScript para manipular imagens SVG. No HTML5, os usuários podem integrar seus códigos XML diretamente na marcação HTML, tornando muito mais fácil acessar os elementos individuais através da interface DOM do navegador. Um exemplo disso – e o princípio de projeto pode ser facilmente aplicado a, por exemplo, manuais interativos – é a visualização animada da coluna de Trajano, pelo utilizador “Hk kng”, da Wikimedia (figura 1).

O único navegador que faz as coisas por si só, nesse sentido, é o Internet Explorer, que só introduziu o Canvas e o suporte para SVG em março de 2011 na versão 9. Novas melhorias são prometidas para a versão 10. Além disso, algumas bibliotecas JavaScript convertem de forma transparente os elementos da API Canvas e do SVG proprietárias para a linguagem gráfica VML da Microsoft, que foi introduzida no Internet Explorer 6.

Mas um porém deve ser observado: o Internet Explorer 10, que foi apresentado na Microsoft Build Conference, e os aplicativos landscape para Windows 8 (lançado em 2012), dependem fortemente de HTML5. Caso você esteja esperando que o padrão HTML5 esteja maduro em todas as plataformas, deverá ser paciente.

O HTML5 possui um status de “Last Call” no W3C, o que é equivalente a um release candidate em outros sistemas/aplicativos. Embora a padrão HTML5 não seja finalizado formalmente até o final de 2014, pouco deve mudar em termos da API Canvas – com base na experiência dos últimos dois anos. O SVG 1.1 foi padronizado oficialmente no início de 2003; no entanto, sua incorporação com o HTML5 é algo que a maioria dos navegadores não aprenderam até muito recentemente. Além disso, apenas alguns navegadores suportam o escopo completo da norma SVG.

Mobilidade obrigatória

Os recursos SVG e Canvas não estão restritos a PCs; os navegadores de smartphones e tablets usam os mesmos motores de renderização utilizados por seus irmãos maiores (figura 2). Dito isso, o Opera Mini é uma versão mais despojada de navegador e seu suporte para recursos SVG está totalmente ausente no navegador Android até a versão 3.0, devido ao seu escopo.

A situação é diferente com o Windows Phone 7, da Microsoft: o navegador nativo é baseado no Internet Explorer 7 para PCs, que não subdimensiona as novas normas do HTML5. Até agora, as restrições impostas pela Microsoft para evitar que determinados aplicativos sejam executados, exceto em tecnologias nativas da Microsoft, como C # e Silverlight, têm feito com que o uso de navegadores alternativos seja impossível. No Windows Phone 7.5, isso provavelmente vai melhorar, do ponto de vista de um navegador nativo.

Já o recentemente anunciado, e surpreendente movimento da Microsoft para fomentar o HTML5, ajuda a melhorar a situação do suporte de navegadores substancialmente. Apesar de alguns programas que foram projetados para o navegador dos PCs falharem porque seus recursos de CPU são rasos ou mesmo devido ao tamanho da tela, alguns aplicativos que possuem uma camada JavaScript para manipulação de Canvas e gráficos SVG serão executado em seu telefone de forma transparente e sem grandes modificações.

Os controles precisam de alguma melhoria. Embora manipuladores de eventos onclick capturem movimentos do mouse, e até mesmo toques na tela do smartphone ou tablet, recursos multitoque requerem uma API JavaScript escrita especialmente para esse fim.

O suporte para Canvas 2D e o suporte multiplataforma para SVG é melhor do que qualquer biblioteca construída para PCs: o HTML5 possui capacidades gráficas que estão disponíveis no Linux, Mac OS X, Windows e smartphones Android e iPhone (tabela 1).

Os desenvolvedores podem esperar suporte nativo para os navegadores de qualquer ambiente de trabalho (além do Internet Explorer, embora soluções alternativas deem aos desenvolvedores web uma opção em termos de compatibilidade com versões anteriores, até a versão 6).

Caixa de pintura

Com o Canvas, o JavaScript desenha linhas, elipses e retângulos, bem como curvas de Bézier como faria a maioria dos programas de desenho populares, só que em tempo real. A função de preenchimento de cores para as formas criadas ainda está faltando, mas gradientes e sombras são suportados.

Todo o conteúdo do Canvas pode ser girado, ampliado e modificado. O elemento Canvas é compreendido por simplesmente uma tag chamada canvas como mostrado no seguinte exemplo:

var canvas = document.getElementById("<I>Canvas‐Element<I>");
var ctx = canvas.getContext('2d');

Esse método getContext() retorna um objeto em JavaScript. O objeto contém comandos para desenho como métodos. O contexto 2D é facilmente compreendido. O objeto Canvas 2D criado por esse código fornece comandos para métodos de desenho. Uma documentação muito útil está disponível neste link, como é o padrão W3C correspondente. A listagem 1 contém um exemplo simples dos mais importantes métodos do Canvas (figura 2). As linhas 6 e 7 da listagem mencionam um arquivo de imagem em um objeto JavaScript. Uma vez que o restante do código não possui permissões para executar a imagem diretamente do servidor, este será um documento HTML dependente de um evento onload.

Listagem 1: Exemplo Canvas 2D

01 <!DOCTYPE html PUBLIC "‐//W3C//DTD XHTML 1.0 Transitional//EN" “http://www.w3.org/TR/xhtml1/DTD/xhtml1‐transitional.dtd">
02 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
03  <head>
04 <script type="text/javascript">
05  //Image object
06  var rose = new Image();
07  rose.src="rose.png";
08  //do not run until the image has been loaded
09  window.onload = function(){
10  //Canvas‐Kontext
11  var canvas = document.getElementById("mycanvas");
12 var ctx = canvas.getContext('2d');
13
14  //selling, outline
15  ctx.fillStyle = "rgba(0,255,50,0.5)";
16  ctx.strokeStyle = "rgba(150,75,0,1)";
17
18  //Shadow
19  ctx.shadowOffsetX = 2;
20  ctx.shadowOffsetY = 3;
21  ctx.shadowBlur = 5;
22  ctx.shadowColor = "#888888"
23
24 //Rectangle
25 ctx.fillRect(50,50,125,125);
26  ctx.strokeRect(50,50,125,125);
27 
28  //draw path object
29  ctx.beginPath();
30  ctx.moveTo(25, 25);
31  ctx.lineTo(105, 25);
32  ctx.arc(125, 25, 20, ‐Math.PI, 0, false)
33  ctx.lineTo(145, 125);
34  ctx.bezierCurveTo(80, 145, 105, 105, 25, 125)
35  ctx.closePath();
36
37  //fill path object
38  ctx.fillStyle = "rgba(255,255,50,0.5)";
39  ctx.fill();
40  ctx.stroke();
41
42  //Bitmap
43  ctx.fillStyle = "rgba(0, 0, 0, 1)";
44  ctx.drawImage(rose, 55, 55, 50, 50);
45 }
46 </script>
47  </head>
48  <body>
49 <canvas id="mycanvas" width="200" height="200"></canvas>
50  </body>
51 </html>

Caminhos e linhas

As linhas 11 e 12 da listagem 1 inicializam um contexto 2D do Canvas. As linhas 14 e 15 criam um preenchimento e uma linha para futuras operações de desenho, e as linhas 19 e 22 possuem controles para sombras, nitidez e cores.

Os comandos do primeiro desenho estão presentes nas linhas 25 e 26: o preenchimento do retângulo possui um esquema equivalente e do mesmo tamanho. As linhas de 29 até 35 desenham um caminho de linhas retas, um arco e uma curva de Bézier.

As primeiras duas linhas devem abrir o caminho e definir o ponto de partida. Isso é seguido por uma linha reta, um semicírculo e uma outra linha reta. Note que o método arc() interpreta o início e o fim dos ângulos (quarto e quinto) como parâmetros radianos em vez
de ângulos. A curva de Bézier forma o lado inferior da caixa. Os primeiros quatro parâmetros descrevem as coordenadas x e y dos pontos de controle que definem o sentido de movimento da curva e sua profundidade, como em qualquer programa de desenho (figura 3).

Efeitos

Exemplos de efeitos baseados em Canvas mostram que a estrutura do Canvas permite o uso de baixas taxas de frame-rate para criação de animações suaves, apesar dos efeitos óticos complexos em computadores considerados estado de arte. Mais bibliotecas JavaScript que facilitam o uso do Canvas estão listadas na tabela 2.

Tabela 2: Bibliotecas Canvas

Nome	Descrição	Site
Processing.js	Porta JavaScript para processamento da visualização da linguagem	http://​­processingjs.​­org
PloKit	Biblioteca para gráficos desenhados em SVG com Canvas	http://​­www.​liquidx.net/plotkit/
Kapi	Animações sem Flash	http://​­jeremyckahn.​­github.​­            com/kapi/
InfoVis	Gráficos interativos	http://​­thejit.org
SpringY	Demonstração minimalista para layouts gráficos	http://​­dhotson.​­github.​­com/​­springy/​­demo.html
Cufon	Fontes baseadas em Canvas	https://​­github.​­com/​­sorccu/​­cufon/
Jqcanvas	Cantos arredondados e gradientes sem arquivos de imagens	http://​­code.​­google.​­com/​­p/               jqcanvas/

O Canvas do HTML é semelhante a um programa de desenho como o GIMP: é possível selecionar e alterar as seções de uma imagem como um bitmap gráfico. Se quiser modificar um elemento que está escondido sob outro objeto, será necessário apenas redesenhar a seção da imagem. Caso esteja familiarizado com programas de desenho vetorial como Inkscape, você saberá criar animações ainda mais facilmente: as formas que você pode desenhar podem ser manipuladas independentemente do ambiente. Se você prefere utilizar uma abordagem baseada em objetos vetoriais, poderá utilizar a caixa de pintura do Canvas, com a qual podem ser implementados gráficos SVG nos códigos HTML5 da página. O formato de arquivo padronizado pelo W3C possui a vantagem adicional de que programas como o Inkscape o utilizam como formato padrão.

Artes cinematográficas

Os recursos do SVG não param nas imagens estáticas: o navegador pode usar a interface DOM construída em JavaScript para abordar a marcação XML como elementos em uma página web normal. Assim, é possível criar imagens SVG para o navegador que são animadas e interativas. Assim como acontece com as páginas HTML, as folhas de estilo definem os atributos dos elementos de desenho.

Os navegadores mais antigos (tabela 1) somente exibirão imagens SVG caso elas sejam incorporadas como arquivos externos com a tag de objeto correspondente. O código JavaScript para manipulação em tempo de execução também precisa ser armazenado no arquivo externo; isso faz com que o trabalho de desenvolvimento se torne mais complexo, mas não afeta a capacidade interativa.

Quando o W3C lançou a especificação do SVG 1.1, acabaram criando um padrão gráfico altamente poderoso para gráficos vetoriais, que muitas vezes supera formato PDF da Adobe, com seus filtros de efeitos. Ele permite aos usuários criar sombras realistas, assim como luz e efeitos de transição, enquanto arquivos no formato PDF dependem de bitmaps incorporados com uma resolução fixa. O primeiro local para encontrar informações para os recém-chegados é o W3Schools. A tabela 3 mostra uma lista das funções básicas do SVG.

Table 3: Visão geral do SVG

Recurso	Funções
Formas básicas	Retângulos (também com cantos arredondados), polígonos, círculos e elipses
Linhas	Linhas retas, curvas de Bézier e curvas polinomiais
Texto	Unicode e também bidirecional e alongamento de linhas
Cores	Cores simples, transparências,, gradientes e preenchimentos com texturas
Efeitos de filtro	Ajustes de gama, foco e desfocamento, efeitos de espelhamento
Interatividade	Scripts com JavaScript, interfaces DOM similares ao HTML, eventos e ações do mouse
Animação	Compatível com SMIL [16], um padrão W3C que descreve animações
Fontes	Fontes externas ao sistema e embutidas em fontes SVG

Ajuda necessária

Alguns ajudantes são indispensáveis para trabalhar com a interface DOM e bibliotecas JavaScript, jQuery e YUI, que não suportam totalmente SVG. Embora seja possível tratar elementos individuais, os atributos SVG não são restritos, como é o caso do código HTML. Eles têm uma estrutura de objetos que as bibliotecas JavaScript projetadas para HTML não conseguem entender.

Um plugin SVG está disponível para jQuery; infelizmente, é necessário modificar um pouco a biblioteca básica jQuery e, ao fazê-lo, é possível manipular o código XML para uma imagem SVG no estilo que os desenvolvedores web esperam do jQuery. Por esse motivo é que o SVG ainda não desempenha um papel importante na Internet, e isso se deve principalmente por conta da Microsoft. O Internet Explorer 9 ainda tem um suporte muito fraco para o SVG (figura 4). Duas soluções estão disponíveis: a biblioteca JavaScript desenvolvida pelo Google, chamada SVG Web, e a conversão de imagens SVG em objetos Flash.

A biblioteca de desenho Raphaël, que também é programada em JavaScript, não usa arquivos SVG pré-construídos. Em vez disso, ela faz a conversão através de comandos, de desenhos em SVG ou VML proprietário, caso você precise oferecer suporte para o Internet Explorer. A API Rafael baseia-se em SVG. Uma vez que dominadas as técnicas SVG, o desenvolvedor não encontrará grandes problemas para utilizar a biblioteca; na verdade, os recém-chegados é que vão achá-lo mais acessível do que trabalhar diretamente com o SVG, porque o Raphaël fornece recursos auxiliares para animações e acesso a elementos SVG através da interface DOM do navegador, incluindo a compatibilidade com Internet Explorer 6 a 9.

***

Na próxima e última parte do artigo, veremos, entre outras coisas, mais detalhes da biblioteca Raphaël, profundidade e WebGL.