HTML 5 vem com várias novidades interessantes e uma das que podemos começar a provar já é o Canvas. Canvas significa em português algo assim como tela e é basicamente isso, uma área onde podemos desenhar como se fosse uma tela.

O elemento canvas permite especificar uma área da página onde se pode, através de scripts, desenhar e renderizar imagens, o que amplia notavelmente as possibilidades das páginas dinâmicas e permite fazer coisas que até agora estavam reservadas aos desenvolvedores em Flash, com a vantagem que para usar canvas não será necessário nenhum plugin no navegador, o que melhorará a disponibilidade desta nova aplicação.

Neste artigo e nos seguintes pretendemos dar uma introdução a canvas, para os leitores de CriarWeb.com interessados em conhecer de perto esta nova utilidade de HTML 5. Ao menos esperamos tornar conhecida as possibilidades do canvas e oferecer alguns exemplos que se possam provar já nos navegadores mais modernos.

Compatibilidade de canvas

O canvas se desenvolveu inicialmente por Apple para seu navegador Safari e logo foi utilizado e padronizado pela organização WHATWG para incorporá-lo a HTML 5. Posteriormente, também foi adotado por navegadores como Firefox e Opera.

Quanto ao Chrome, é um navegador que utiliza o mesmo motor de renderizado que Safari, portanto também suporta o elemento Canvas.

Dentre os navegadores mais habituais só nos falta por suportar canvas o sempre polêmico Internet Explorer. A última versão do navegador no momento de escrever este artigo, Internet Explorer 8, não suporta canvas com funções nativas, porém existem diversos projetos e plugins que podem ampliar as funcionalidades do navegador para dar suporte a este novo elemento do HTML 5. Por exemplo, existe o projeto Explorer Canvas que se preparou um plugin para que Explorer suporte o desenho 2d que permite canvas.

Entretanto, embora em diversas frentes populares começou a se utilizar Canvas, a falta de suporte de Explorer faz com que ainda não seja muito recomendável sua incorporação às aplicações web, já que a maioria dos usuários, que utilizam explorer, não poderiam ver as partes da página onde se utiliza canvas. Espera-se que essa situação mude durante os próximos meses ou anos, visto que a incorporação de canvas ao HTML 5 já é uma realidade e Internet Explorer mais cedo ou mais tarde terá que dar suporte esta utilidade em seu navegador, se não quer que se descarte sua utilização por parte dos usuários que desejarem acessar aos serviços web mais avançados.

Polêmica pela propriedade intelectual de Canvas

Um dos problemas de canvas é que se criou sob propriedade intelectual de Apple, ou seja, que tal empresa era a criadora da engenharia que dava suporte a este novo elemento e portanto se encontrava sob patentes da companhia. Este fato, adicionado à existência de um formato aberto que serve para hacer coisas similares como é o SVG, fez com que surgisse uma polêmica sobre a aceitação deste elemento no novo padrão do HTML 5.

Felizmente, Apple abriu a licença de uso de patente, liberando a propriedade intelectual da mesma, condição estritamente necessária para que a W3C, que sempre apoia patentes livres, incorporasse finalmente canvas dentro do novo padrão da linguagem HTML.

Aplicações de uso de Canvas

Canvas permite desenhar na página e atualizar dinamicamente estes desenhos, por meio de scripts e atendendo às ações do usuário. Tudo isto dá umas possibilidades de uso tão grandes como as que dispomos com o plugin de Flash, no que se refere à renderização de conteúdos dinâmicos. As aplicações podem ser grandes como possamos imaginar, desde jogos, efeitos dinâmicos em interfaces de usuário, editores de código, editores gráficos, aplicações, efeitos 3D, etc.

Atualmente, algumas das aplicações mais inovadoras para a web utilizam já canvas para seu funcionamento, onde se pode destacar Bespin, um editor de código de Mozilla, ou Google Wave.

Nos seguintes artigos veremos exemplos de uso de canvas e explicaremos como podemos utilizar nós mesmos esta nova ferramenta do HTML 5.