O HTML5 é o próximo grande passo da Web, que vai permitir criar uma experiência mais agradável de navegação, e a tag canvas é talvez a que mais contribuirá para esse efeito.
O elemento canvas permite criar uma área de desenho, na qual podemos desenhar desde simples figuras geométricas, até imagens complexas, como bitmaps.

Actualmente o elemento canvas do HTML5 é suportado pelos seguintes browsers:

• Firefox 1.5 ou superior
• Google Chrome
• Safari 2.0
• Opera 9.5 ou superior

Para um suporte melhor é recomendada a utilização do browser mais recente, uma vez que o HTML5 ainda se encontra em fase de desenvolvimento e por isso o suporte para o canvas ainda não é completo.

Mas existe um problema…

E o Internet Explorer? Como o suporte para HTML5 no Internet Explorer é praticamente inexistente, o elemento canvas ainda não é suportado, mas podemos usar o Google Chrome Frame, que é um plugin que permite usar o motor do Chrome, que suporta HTML5 e canvas, no Internet Explorer. Pode verificar aqui como usar o Google Chrome Frame.

Criar um elemento canvas

O elemento canvas tem apenas 2 atributos, o width e o height, que correspondem ao comprimento e altura da área de desenho respectivamente.

Depois convém definir um id para o canvas, uma vez que vai ser necessário aceder ao elemento através de Javascript.

Exemplo:

1
<canvas id="areaDesenho" width="200" height="200"></canvas>

Também podemos definir uma mensagem ou uma imagem a exibir, no caso de o browser não suportar o elemento canvas, para isso basta introduzir o HTML que queremos que apareça quando não existe suporte.

Exemplo:

1
2
3
<canvas id="areaDesenho" width="200" height="200">

    O seu browser ainda não suporta HTML5 ou a tag Canvas!

</canvas>

Obter contexto de desenho do canvas: getContext

Antes de começar a desenhar no canvas temos de obter o contexto para desenho, neste caso vamos desenhar em 2D, por isso queremos obter o contexto de desenho em 2D.
Para obter um contexto usamos a função getContext do elemento canvas.

Exemplo:

1
2
var canvasElem = document.getElementById('areaDesenho');

var contexto = canvasElem.getContext('2d');

Desenhar Rectângulos no canvas: fillRect, strokeRect e clearRect

Existem três funções para desenhar rectângulos no canvas, a função fillRect, strokeRect e clearRect. A forma de uso é igual para as três, mas a fillRect cria um rectângulo preenchido, a strokeRect cria um rectângulo com apenas a borda e a clearRect cria um rectângulo que limpa a área do mesmo.

Modo de uso:

Exemplo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function drawRect() {

    var canvasElem = document.getElementById('areaDesenho');

    if (canvasElem.getContext) {

        //Obtém o contexto "2d" de desenho para o canvas

        var context = canvasElem.getContext('2d');



        //Desenha rectângulo opaco

        context.fillStyle = "rgb(200, 0, 0)";

        context.fillRect(0, 0, 150, 100);



        //Desenha rectângulo com transparência

        context.fillStyle = "rgba(0, 0, 200, 0.5)";

        context.fillRect (120, 70, 70, 70);

    }

}

No exemplo anterior usei também a propriedade fillStyle, que define a cor de preenchimento que quermos usar nas instruções de desenho seguintes. Também existe uma função strokeStyle, cujo uso é igual, mas que define a cor do traço que queremos usar.

Desenhar Imagens no canvas: drawImage

Para desenhar imagens no contexto de desenho do canvas, usamos a função drawImage, que recebe como parâmetros, uma imagem, a posição x e y, a largura e a altura da imagem. A largura e altura são opcionais, e se não forem especificadas serão usadas a altura e largura da imagem.

Modo de uso:

Exemplo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function drawImage() {

    var canvasElem = document.getElementById('areaDesenho');

    if (canvasElem.getContext) {

        //Obtém o contexto "2d" de desenho para o canvas

        var context = canvasElem.getContext('2d');



        //Desenha a imagem no canvas

        var img = new Image();

        img.onload = function(){

            context.drawImage(img,10, 50);

        }

        img.src = 'canvas_image.png';

    }

}

Neste exemplo criamos uma nova imagem(“canvas_image.png”), e esperamos que esta esteja carregada, para depois desenha-la na área de desenho.

Desenhar Caminho(Path) no canvas

Antes de começar a desenhar um caminho ou path, usamos a função beginPath, que inicializa a criação de uma nova path.

Depois de inicializada, podemos usar as funções moveTo, lineTo, arc, bezierCurveTo e rect.

Depois se quisermos, podemos fechar o caminho executando o método closePath, que desenha uma linha recta desde o ponto actual até à primeira posição.

Para terminar podemos usar a função fill ou stroke, para preencher ou traçar o caminho que foi desenhado.

Mover posição no canvas

A função moveTo, move para uma posição(x, y) do canvas a ser usada como posição de inicio para a próxima função de desenho, sem desenhar nada. Isto funciona como quando levantamos a caneta para desenhar noutro sitio.

1
moveTo(x, y)

Desenhar Linhas no canvas

Para criar uma linha desde a posição actual até uma posição(x,y) e mover a posição actual para essa posição usamos a função lineTo.

1
lineTo(x, y)

Desenhar Arcos ou Círculos no canvas

Para desenhar arcos ou círculos num caminho ou path do canvas usamos a função arc. A função arc toma como parâmetros uma posição central do arco(x,y), um raio, um ângulo inicial e final, e a indicação de uso do sentido inverso ao dos ponteiros do relógio para os ângulos.

1
arc(x, y, raio, anguloInicial, anguloFinal, contrarioPonteriosRelogio)

Desenhar Curvas de Bézier no canvas

A função bezierCurveTo cria uma curva de Bézier desde a posição actual no canvas até à posição(x,y) passada como parâmetro,  com os pontos de controlo (c1x, c1y) e (c2x, c2y).

1
bezierCurveTo(c1x, c1y, c2x, c2y, x, y)

Exemplo – Usando um caminho ou path no canvas:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function drawPath(){

    var canvasElem = document.getElementById('areaDesenho');

    if (canvasElem.getContext) {

        //Obtém o contexto "2d" de desenho para o canvas

        var context = canvasElem.getContext('2d');



        //Desenha um triangulo azul

        context.fillStyle = "blue";

        context.beginPath();

        context.moveTo(60, 10);

        context.lineTo(10, 50);

        context.lineTo(110, 50);

        context.lineTo(60, 10);

        context.fill();

    }

}

Download do Exemplo de uso do Canvas

Para mais exemplos podem verificar o tutorial da Mozilla Developer Center.

Artigos Relacionados:

1. HTML – Tabela com cabeçalho e tamanho fixo