Canvas é um elemento do HTML5 que serve para fazer todo o tipo de desenhos em páginas web. Sua tradução para o português seria "tela" e não é mais que isso, um espaço onde podemos desenhar e inclusive criar animações. O interessante é que tais desenhos são realizados através de um API de programação criada em Javascript e que permite fazer ilustrações, utilizar fotografias e tudo isso dinamicamente.
Entretanto, no momento de escrever estas linhas e talvez por muito tempo, nem todos os navegadores oferecem suporte a tal elemento, nem, é claro, ao API Javascript de Canvas. É por isso que, para fazer páginas compatíveis com todos os navegadores, temos que nos esquecer desta característica do HTML5 ou então utilizar alguma biblioteca que ofereça suporte em navegadores antigos.
FlashCanvas é uma das opções que temos para poder utilizar canvas nestes momentos com a total garantia de que nossa página será bem visualizada emInternet Explorer 6, 7 e 8, que não têm suporte a esse elemento. Suas funcionalidades estão baseadas no uso de Flash, de modo que no navegador do usuario terá que estar disponível o plugin de Flash versão 9 em diante.
Neste artigo veremos algumas notas sobre a implementação desta biblioteca e a carga condicional da mesma, que somente deveria se produzir no caso do usuário estar trabalhando com Internet Explorer 6 a 8.
Pode-se encontrar a página do projeto em: http://code.google.com/p/flashcanvas/
Vamos ver uma receita para poder utilizar FlashCanvas.
1) Baixar a biblioteca e copiar os arquivos em seu site
Devemos baixar o pacote com as bibliotecas, que contém tudo aquilo que necessitaremos para usar FlashCanvas assim como numerosos exemplos.
No momento, para o que vamos fazer, temos que observar a pasta "bin", que tem os arquivos:
2) Incluir o script FlashCanvas para versões antigas de Internet Explorer
O primeiro passo é fazer o carregamento da biblioteca Javascript em Internet Explorer 6, 7 e 8. Para isso vamos utilizar um código condicional que só interpreta Internet Explorer.
<!--[if lt IE 9]>
<script type="text/javascript" src="flashcanvas.js"></script>
<![endif]-->
Isto está dizendo à Internet Explorer que, se é uma versão anterior à 9, o script Javascript flashcanvas.js.
3) Começar a usar canvas
Este passo na maioria dos casos é imediato. Ou seja, uma vez incluído o script flashcanvas.js se inicializarão automaticamente os elementos canvas da página, de modo que possamos desenhar sobre eles do mesmo modo como fazíamos em navegadores compatíveis. A graça desta biblioteca é justamente essa, poder utilizar canvas em qualquer navegador não compatível, da mesma maneira como se fosse.
Agora, há dois casos nos que sim se deve inicializar os elementos canvas explicitamente.
//crio um elemento canvas
var meucanvas = document.createElement("canvas");
//insiro esse elemento dentro de outro elemento que haja na página
document.getElementById("lugarInsercaoElementoCanvas").appendChild(meucanvas);
//se se carregou a biblioteca FlashCanvas
if (typeof FlashCanvas != "undefined") {
//entao inicializo o elemento canvas explicitamente
FlashCanvas.initElement(meucanvas);
}
No código anterior, a parte onde se faz a comprovação (typeof FlashCanvas != "undefined") é importante, porque assim nos certificamos de inicializar o canvas com FlashCanvas somente no caso de que essa biblioteca tenha sido carregada. Ou seja, os navegadores que suportam canvas, onde a biblioteca não se tenha carregado, não executarão o código para inicializar o canvas por meio de FlashCanvas.
Assim que podemos começar a trabalhar com Canvas tal como fazemos habitualmente, pois todo o API Javascript relacionado com Canvas estará disponível nos navegadores mais antigos.
Podemos ver um exemplo de página na que colocamos em funcionamento FlashCanvas. Deveria se poder ver o desenho sobre o canvas em qualquer navegador.
O código HTML 5 da página web do exemplo é o seguinte:
<!DOCTYPE html>
<html>
<head>
<title>Testando FlashCanvas</title>
<!--[if lt IE 9]>
<script type="text/javascript" src="flashcanvas.js"></script>
<![endif]-->
<script language="javascript">
window.onload = function(){
var elemento = document.getElementById("meucanvas");
var contexto = elemento.getContext('2d');
contexto.fillStyle = '#f5f';
contexto.fillRect(10,10,90,50);
contexto.fillStyle = '#5ff';
contexto.fillRect(35,35,50,90);
contexto.strokeStyle = 'rgba(200, 80, 0, 0.7)';
contexto.lineWidth = 5;
contexto.beginPath();
contexto.moveTo(50,15);
contexto.lineTo(130,85);
contexto.lineTo(50,125);
contexto.lineTo(25,75);
contexto.lineTo(25,15);
contexto.closePath();
contexto.stroke();
}
</script>
</head>
<body>
<canvas id="micanvas" width="150" height="150">
Se você vir isto é que seu canvas não funciona!!
</canvas>
</body>
</html>
De novo, deixo o link para ver o exemplo em funcionamento.
O uso não tem muito mistério, pois uma vez incluído o script de FlashCanvas, se poderá utilizar qualquer elemento canvas como se estivéssemos em um navegador que o suporta. O único detalhe é saber incluir esta biblioteca apenas nos navegadores que não suportem canvas, algo que neste artigo fizemos através de condicionais HTML que só entende o Internet Explorer.
No artigo seguinte mostraremos como incluir esta biblioteca de uma maneira um pouco melhor, fazendo uso da biblioteca Modernizr.
