O que é Canvas HTML5?

 HTML5 trouxe diversas novas tags, além das novidades nas tags input de formulário e das tags semânticas como article e section, uma das grandes mudanças implementadas foi a tag canvas.

Canvas é uma nova tag que permite você trabalhar e manipular elementos gráficos (raster). A tag canvas é um "board" de desenho no HTML, nele você pode desenhar linhas, elementos, manipular pixel a pixel, carregar e manipular imagens externas (rotacionar, alterar cor, brilho, etc.).

É uma evolução gigante pois permite a manipulação em tempo real do que está sendo impresso como imagem no computador do cliente.

Um exemplo de uso são jogos, gráficos e interfaces ainda mais interativas.

 

Quais navegadores dão suporte ao Canvas?

Praticamente todos os navegadores modernos dão suporte ao Canvas. Confira a tabela abaixo:

 

	IE	Firefox	Chrome
14 versions back			4.0: Supported
13 versions back			5.0: Supported
12 versions back		2.0: Supported	6.0: Supported
11 versions back		3.0: Supported	7.0: Supported
10 versions back		3.5: Supported	8.0: Supported
9 versions back		3.6: Supported	9.0: Supported
8 versions back		4.0: Supported	10.0: Supported
7 versions back		5.0: Supported	11.0: Supported
6 versions back		6.0: Supported	12.0: Supported
5 versions back		7.0: Supported	13.0: Supported
4 versions back	5.5: Not supported	8.0: Supported	14.0: Supported
3 versions back	6.0: Not supported (but has polyfill available)	9.0: Supported	15.0: Supported
2 versions back	7.0: Not supported (but has polyfill available)	10.0: Supported	16.0: Supported
Previous version	8.0: Not supported (but has polyfill available)	11.0: Supported	17.0: Supported	3.0: Supported
Current	9.0: Supported	12.0: Supported	18.0: Supported
Near future	10.0: Supported	13.0: Supported	19.0: Supported
Farther future		14.0: Supported	20.0: Supported

Veja a tabela completa e atualizada no Can I Use

 

Entendendo melhor o canvas

Neste tutorial inicial vou explicar alguns métodos do canvas e seu funcionamento. O elemento canvas é todo manipulado por javascript, e trabalha com contextos. Pelo javascript você terá acesso a diversos métodos para desenhar nesta tela, no contexto 2D você utiliza um plano cartesiano (x e y) para definir a posição de onde vai trabalhar, e através de métodos específicos pode traçar formas, linhas e definir tamanhos e cores utilizadas.

Para fazer uma animação por exemplo, você faz o seu primeiro desenho e através do javascript define um time que irá limpar o seu contexto e redesenhar os objetos em sua nova posição. Isso também server para jogos em HTML5 ou interação com o usuário: quando acontecer a interaçãovocê limpa o contexto e redesenha sua cena com os objetos manipulados em suas novas posições.

 

Vamos a prática!

Programando para Canvas

Coloque o elemento canvas no seu HTML e use um identificador para facilitar a manipulação do javascript.

<canvas id="myCanvas"></canvas>

 

Vamos agora selecionar o nosso canvas e definir o contexto em que iremos trabalhar, aqui já entra o javascript:

window.onload = function() {
  var canvas = document.getElementById("myCanvas");
  var context = canvas.getContext("2d");
};

 

Isso defina que vamos trabalhar com o contexto 2D do canvas.

 

Desenhando uma linha com Canvas

Agora que você já tem o seu contexto definido, vamos desenhar uma linha no nosso gráfico, no javascript:

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(100, 150); //define o ponto inicial do desenho
context.lineTo(450, 50); //define a posição de in
context.lineWidth = 5; // define a largura da linha
context.strokeStyle = "#ff0000"; //define a cor da linha
context.stroke();

 

Pronto, temos uma linha que começa no ponto (100,150) e vai até (450,50).

Desenhando um retângulo com canvas

Agora vamos desenhar um retângulo em nosso canvas, para isso no javascript temos o método rect, que funciona da seguinte forma:

context.rect(x, y, width, height);

O exemplo do código completo:

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.rect(188, 50, 200, 100); // desenha o retângulo
context.fillStyle = '#8ED6FF'; // define o preenchimento do retângulo
context.fill(); // Preenche o retângulo
context.lineWidth = 5; // define a largura da linha do contorno
context.strokeStyle = 'black'; // define a cor do contorno
context.stroke(); // desenha o contorno

 

Desenhando um círculo com canvas

Para desenhar círculos (e arcos) temos o método arc, que funciona da seguinte forma:

context.arc(x, y, radius, startAngle, endAngle, antiClockwise);

No exemplo acima podemos desenhar arco com qualquer angulo de início e fim, para desenhar círculos completos podemos usar o seguinte:

context.arc(x, y, radius, 0 , 2 * Math.PI, false);

Fica mais fácil e temos que nos preocupar apenas com o ponto cartesiano (x,y) e com o tamanho do raio do círculo. Abaixo um exemplo completo:

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = canvas.width / 2; // pega o centro do canvas (x)
var centerY = canvas.height / 2;  // pega o centro do canvas (y)
var radius = 70; 

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); // desenha o círculo no centro do canvas com raio = 70
context.fillStyle = "#8ED6FF"; // define a cor de preenchimento
context.fill(); // desenha o preenchimento
context.lineWidth = 5; // define a expessura da borda
context.strokeStyle = "black"; // define a cor da borda
context.stroke(); // desenha a borda

 

Esse é um tutorial introdutório ao Canvas, ele parece mais complicado do que realmente é. Para entender um pouco melhor o funcionamento do canvas e suas animações criei um Pong em HTML5 Canvas, mas ainda não tive tempo de finalizar. O código está com a leitura fácil, vale a pena a leitura. 😉

 

Recomendo a leitura (em inglês) do html5 canvas tutorials, de onde os exemplos deste post foram retirados.

 

Este post te ajudou de alguma forma? Retribua, divulgue o link deste artigo em seu blog, twitter ou facebook e nos ajude a compartilhar conhecimento.