Balaio Tecnológico: Trabalhando com a tag Canvas do HTML5

Dando continuidade aos posts sobre uso da tag Canvas (veja parte I e parte II), falo aqui sobre o uso de textos no canvas e a manipulação de imagens.

As propriedades básicas disponíveis para formatarmos a exibição de textos no Canvas são o tipo de fonte e a cor para o desenho. O tipo do fonte pode ser modificado através da propriedade font. Como a interpretação do valor contido nessa propriedade é idêntica ao de folhas de estilo CSS, podemos configurar com ela a família do fonte (Arial, Tahoma, Courier, etc.), o tamanho das letras e estilos especiais (negrito, itálico, etc.).

Quando trabalhamos com figuras geométricas no outro post, vimos que há duas formas de comandar um desenho : traçando apenas a borda ou preenchendo também o interior da figura, sendo que as cores para um ou outro são configuradas em propriedades separadas. O mesmo vale para o desenho de textos.

Assim, a propriedade fillStyle conterá a cor para preencher o texto quando este for desenhado usando a função fillText. Por outro lado, a propriedade strokeStyle define a cor das bordas do texto vazado a ser desenhado usando a função strokeText. Ambas as propriedades aceitam valores que estejam em conformidade com as regras de definição de cores estabelecidas pelo padrão CSS. Veja um exemplo :

 var myCanvas = document.getElementById("cnvText2");

var ctx = myCanvas.getContext("2d");

ctx.fillText ("Fonte e cores padrões", 5, 20);

ctx.font = "bold 16px Verdana";

ctx.fillStyle = "blue";

ctx.fillText ("Verdana 16px negrito", 5, 40);

ctx.font = "20px Courier";

ctx.strokeStyle = "#0FAF0F";

ctx.strokeText ("Courier 20px stroke", 5, 65);

ctx.font = "36px Arial";

ctx.strokeStyle = "maroon";

ctx.strokeText ("Arial 36px stroke", 5, 100);      Seu navegador (ou leitor de RSS) não suporta canvas ...

Usando fontes pequenas, o efeito de desenhar somente a borda acaba diluído, dando a impressão que o texto está todo preenchido. Portanto, ele funciona melhor com fontes maiores.

Conforme vemos no quadro anterior, as funções de desenho de texto aceitam 3 parâmetros : o próprio texto que será escrito e as coordenadas da posição no canvas onde ele deve ser renderizado. Normalmente, a posição indica o canto superior esquerdo de um retângulo virtual que conterá o texto. O significado dessa posição, no entanto, pode variar de acordo com o valor das propriedades textAlign e textBaseline. A primeira altera a interpretação do posicionamento horizontal do texto enquanto a segunda controla a coordenada vertical. Não é muito comum ter que alterar esses valores pois, no geral, os valores originais dão conta do recado.

Poderíamos ainda ter passado como 4o parâmetro o comprimento máximo que o texto deve ocupar - caso o tamanho real exceda esse valor, o tamanho do fonte é alterado automaticamente para que o texto caiba.

Um outro aspecto para incrementar a renderização de textos é a criação do efeito de sombra. Essa característica é controlada pelas propriedades shadowColor - que corresponde à cor da sombra - e o par shadowOffsetX e shadowOffsetY - respectivamente, o deslocamento horizontal e vertical da sombra a ser projetada em relação ao texto. É possível também esfumaçar a sombra, deixando o efeito mais sutil. Consegue-se isso usando a propriedade shadowBlur, cujo valor indica o quão borrada deve ser a sombra projetada. Seguem alguns exemplos:

  ctx.font = "18pt Arial";

ctx.fillStyle = "#0F0FA0";

ctx.shadowColor = "gray";

ctx.shadowOffsetX = 3;

ctx.shadowOffsetY = 3;

ctx.fillText ("Texto com sombra comum", 5, 40);

ctx.fillStyle = "#7F0FA0";

ctx.shadowColor = "black";

ctx.shadowOffsetX = 2;

ctx.shadowOffsetY = 2;

ctx.shadowBlur = 2;

ctx.fillText ("Texto com sombra borrada", 5, 70);

ctx.fillStyle = "green";

ctx.shadowColor = "black";

ctx.shadowOffsetX = 2;

ctx.shadowOffsetY = 2;

ctx.shadowBlur = 8;

ctx.fillText ("Sombra muito borrada", 5, 100);

      Seu navegador (ou leitor de RSS) não suporta canvas ...

De acordo com a padronização da W3C, para desenharmos uma imagem no canvas devemos usar a função drawImage. Com ela, podemos transferir para o canvas uma imagem inteira ou uma parte retangular dela. Também podemos modificar a proporção da imagem renderizada no canvas, indicando se ela é cópia exata da imagem original ou se será ajustada para um novo comprimento e altura. Neste link publicado pela W3C há uma explicação e um gráfico que ilustram o funcionamento dos parâmetros envolvidos na cópia da imagem original para o Canvas.

Em sua versão mais simples, o drawImage aceita como parâmetros a imagem em si e a coordenada do canto superior esquerdo no canvas a partir de onde a imagem será renderizada. Neste contexto, uma imagem pode ser tanto uma tag IMG quanto um outro canvas ou até mesmo a tag VIDEO, introduzida no HTML5. No caso da IMG, podemos recuperar uma referência à imagem usando a função getElementById do documento HTML (se a imagem já estiver embutida na página HTML) ou criar uma nova referência do zero, instanciando o objeto Image:

  var img = new Image();

img.onload = function () {

ctx.drawImage (img, 10, 10);

ctx.drawImage (img, 110, 10, 70, 110);

ctx.drawImage (img, 10, 15, 45, 60, 220, 20, 45, 60);

}

img.src = '40anos.gif';

ctx.font = "10pt Tahoma";

ctx.fillText ("Normal", 30, 130);

ctx.fillText ("Novo tamanho", 110, 130);

ctx.fillText ("Cópia parcial",210, 130);       Seu navegador (ou leitor de RSS) não suporta canvas ...

É importante ressaltar que a carga da imagem é disparada de modo assíncrono, logo após a URL para a imagem ter sido informada. Isto significa que o script continua a executar enquanto o navegador localiza e carrega a imagem. Por isso, no script acima a imagem é desenhada no canvas dentro do evento onload da tag da imagem. Ou seja, o desenho só é feito quando efetivamente a imagem está disponível.

As propriedades para sombreamento de texto discutidas neste post também são aplicáveis ao desenho de imagens. Assim, podemos incrementar o resultado adicionando esse efeito conforme a necessidade:

   var img = new Image();

img.onload = function () {

/* Remove o recurso de sombreamento para a 1a imagem */

ctx.shadowOffsetX = 0;

ctx.shadowOffsetY = 0;

ctx.shadowBlur = 0;

ctx.drawImage (img, 10, 10);

/* Aplica o recurso de sombreamento para as demais imagens */

ctx.shadowColor = "#2D90E0";

ctx.shadowOffsetX = 7;

ctx.shadowOffsetY = 10;

ctx.shadowBlur = 8;

/* Copia a imagem completa para um local no canvas */

ctx.drawImage (img, 110, 10);

/* Copia parte da imagem para um local no canvas */

ctx.drawImage (img, 10, 15, 45, 60, 220, 20, 45, 60);

}

img.src = '40anos.gif';

/* Para os textos, remove os efeitos de sombreamento */

ctx.font = "10pt Tahoma";

ctx.shadowColor = "black";

ctx.shadowOffsetX = 0;

ctx.shadowOffsetY = 0;

ctx.shadowBlur = 0;

ctx.fillText ("Normal", 30, 130);

ctx.fillText ("Com Sombra", 110, 130);

ctx.fillText ("Cópia parcial", 210, 123);

ctx.fillText ("com sombra", 210, 137);       Seu navegador (ou leitor de RSS) não suporta canvas ...

Note pelo exemplo anterior que mesmo na cópia de apenas parte de uma imagem o efeito de sombreamento se aplica.

Em outra oportunidade mostrarei mais recursos do canvas associado a cores e imagens (como rotação e criação de gradientes) e como misturar isso tudo.