CANVAS API
Quando comparado à seu antecessor, pode-se notar que o HTML5 trouxe várias novidades, dentre elas o Elemento CANVAS, que permite ao designer criar desenhos bitmap dos mais variados tipos em seu site, manipular pixels e objetos, rotacioná-los, entre outros recursos. Porém a tag por si só, não faz imagem alguma, sendo necessário recorrer ao JavaScript, e ocasionalmente, ao CSS.
Exemplo:
A única linha de HTML5 necessária é a <canvas> , onde definimos as dimensões da imagem que iremos trabalhar:
<canvas id="myCanvas" width="200" height="100" style=""border: 1px;" solid="" 000000=""></canvas>
A partir daí, será utilizado JavaScript, onde atribuiremos as características desejadas à imagem, como a área ocupada, a quantidade de dimensões(2D ou 3D), e sua cor:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
Que nos deixa com a imagem abaixo:
Conclusão: Porquê usar o CANVAS
Muitas pessoas podem questionar o motivo de usar CANVAS, uma vez que já existe o FLASH, mas este não tem suporte nativo nos navegadores, e necessita de plugin, por ser um arquivo externo. O CANVAS, por outro lado, possui suporte por já estar incluso nos navegadores (exceto versões do Internet Explorer inferiores à 9), além de interagir diretamente com outros elementos HTML, e renderizar imagens mais rápido, sendo assim, uma ferramente mais fácil de usar.
