O que é HTML5? Antes de falarmos do HTML5, precisamos lembrar-nos do HTML4 que, quando foi lançado, a comunidade de desenvolvedores foi alertada de boas práticas que deveria seguir. Formatação, separação de código, acessibilidade eram algumas dessas boas práticas. Porém essa versão ainda não trazia um grande diferencial e também não facilitava o uso de Javascript e CSS. O HTML5, logicamente, é a evolução direta do HTML4, a qual corrige bugs de sua versão anterior e principalmente traz muitas melhorias à linguagem, pois tem como um de seus objetivos facilitar a manipulação do elemento possibilitando ao desenvolvedor modificar as características do objeto de forma não intrusiva. Entre outras características, a 5ª versão do HTML vem …exibir mais conteúdo…

Veremos no próximo tópico como desenhar dentro da canvas por Javascript.
Desenhando formas e imagens na canvas
Muito bem, vamos começar a desenhar agora. Nos próximos exemplos veremos como desenhar círculos, retângulos, linhas e por fim veremos como adicionar imagens.
Antes de começarmos os desenhos, devemos saber que uma canvas é composta por pixels como em um plano cartesiano que começam em x = 0 e y =0 no canto superior esquerdo onde x é crescente para a direita e y é crescente para baixo.

Figura 1: Modelo de uma canvas
Outra coisa que devemos saber é que sempre antes de desenhar, devemos selecionar a canvas e capturar o contexto gráfico da mesma, pelo metodo getContext(), da seguinte forma:

Listagem 2: Selecionando a canvas e capturando o contexto gráfico 1234 | <script type="text/javascript">var c=document.getElementById("idCanvas");var ctx=c.getContext("2d");</script> |
Para desenhar qualquer coisa na canvas, sempre devemos ter o contexto dela acessível, por isso armazenamos ele em uma variável.
Desenhando Linha
Para desenharmos uma linha, precisamos usar no mínimo três métodos, são eles: moveTo(x,y), lineTo(x,y) e stroke(). O primeiro define o ponto inicial da linha, já o segundo é o próximo ponto, o último, por sua vez, desenha a linha. Vejamos um exemplo na Listagem 3.

Listagem 3: Criando um linha