O HTML5 trouxe algumas novas e empolgantes vantagens para o mundo da codificação HTML.

Canvas é um elemento da HTML5 destinado a delimitar uma área para renderização dinâmica de gráficos. Todo o trabalho de criação e animação é realizado através de linguagens de programação dinâmica (usualmente Javascript).

Em outras palavras o canvas permite que você renderize gráficos alimentados por Javascript. Então é hora de jogar fora esse código flash e mergulhe no Canvas. Canvas possui óptimos recursos para integração com o HTML5 em muitos aspectos.

O elemento HTML5 <canvas> oferece uma maneira fácil e eficiente de desenhar gráficos usando JavaScript. Ele pode ser usado para desenhar gráficos, fazer composições de fotos ou fazer animações simples (e não tão simples).

O elemento foi originalmente introduzido pela Apple Inc. para o navegador Safari. As aplicações da Mozilla ganharam suporte ao canvas começando pelo Gecko 1.8 (Firefox 1.5). O Internet Explorer possui suporte ao elemento a partir da versão 9. Para adicionar suporte as versões anteriores desse navegador, basta incluir um script feito pela Google chamado Explorer Canvas. Google Chrome e Opera também suportam o canvas.

Exemplo:

<canvas id = "mycanvas" width = "100" height = "100"></canvas>

Você pode encontrar facilmente esse elemento no DOM usando o método getElementById () da seguinte maneira:

 var canvas = document.getElementById("mycanvas");

Alguns tipos de efeitos criado em canvas

  • Forma de tela e efeitos de cor
  • Efeito de onda colorida de tela HTML5
  • Efeitos de iluminação, cor e textura da tela HTML5
  • Efeito de flores desabrochando de tela HTML5
  • Partículas de texto interativo em tela HTML5