Maratona HTML5 parte 2

ELEMENTO CANVAS

Introdução

canvas é um novo e poderoso elemento entre as inúmeras novas funcionalidades do HTML 5. Com o canvas você consegue de maneira fácil criar gráficos, composições de fotos e animações usando JavaScript. Pense em um bloco de notas, cada folha é um elementocanvas onde você pode usar um contexto diferente, utilizando ou não API's para fornecer funcionalidades de desenho.

Com a chegada do Internet Explorer 9, todos os grandes navegadores em suas versões atuais já tem suporte para canvas. Se o seu navegador está desatualizado, aproveite agora para atualizar.

Neste tutorial, vou tentar passar um pouco de como implementar um contexto de canvas 2D em seu código HTML, é requisito que você conheça o básico de JavaScript.

Princípio básicos

Vamos começar inserindo o elemento canvas em seu HTML:

      <canvas id="tutorial" width="300" height="300"></canvas>
  Você precisa identificar o elemento para encontrar mais tarde via JavaScript, nosso canvas então está identificado como #tutorial. O elemento canvas possui apenas dois atributos widthe height. Se esses elementos não estiverem especificados via CSS ou pelas propriedades DOM, a tela será criada inicialmente com 300 pixels de largura e 150 pixels de altura.
funções canvas
Funções de transformação
scale – para escalonar o contexto atual.
rotate – para girar as coordenadas x e y do contexto atual.
Funções de estado
save – para salvar o estado atual do contexto.
restore – para restaurar o contexto a um estado salvo anteriormente.
Funções de texto
font – obtém ou define a fonte do contexto atual.
fillText – renderiza o texto preenchido no canvas atual.
measureText – mede a largura atual do texto especificado.
Como você deve imaginar, há mais métodos anexados à API 2D do canvas. Visite esta página para conhecer os métodos não mencionados nesta seção.

O canvas é bastante tedioso se não desenharmos nele, por isso vamos ver o que pode ser desenhado quando temos o contexto.
Formas e cores
Existe um grupo grande de propriedades e funções voltadas ao desenho de formas. Vamos começar com os retângulos. Estas são as funções disponíveis para desenhar retângulos.
fillRect(x, y, w, h) – desenha o retângulo na tela usando o estilo de preenchimento atual
strokeRect(x, y, w, h) – desenha a caixa que contorna o retângulo usando o estilo de traço atual
clearRect(x, y, w, h) – limpa todos os pixels dentro do retângulo deixando-o preto 
demos  canvas :
canvas3d
 esse demo aqui vocês pode desenha seus próprios desenhos
carvas desenhos
obs: peguei de um site os demos