Curso de HTML5

Educao e Informtica

iLearn

Sumrio
CANVAS API......................................................................................................... 4
Origem do Canvas........................................................................................... 4
A evoluo da especificao............................................................................ 6
Trabalhando com o <canvas>.........................................................................6
Suporte dos navegadores................................................................................ 7
O elemento <canvas>........................................................................................ 9
O que Fallback?........................................................................................ 10
Coordenadas Cartesianas.............................................................................. 12
Verificar suporte do canvas no navegador.....................................................13
Cdigo Bsico para o Canvas.........................................................................15
Comenando a Desenhar.................................................................................. 16
fillStyle........................................................................................................... 16
fillRect(x,y,l,a)................................................................................................ 16
Cdigo do primeiro programa usando a API do canvas...............................17
rect(x,y,l,a).................................................................................................... 18
Limpando Parte do Desenho............................................................................. 19
clearRect(x,y,l,a)............................................................................................ 19
Trabalhando com Bordas................................................................................... 21
strokeStyle..................................................................................................... 21
strokeRect(x,y,l,a).......................................................................................... 21
Trabalhando com Sombras................................................................................ 22
shadow.......................................................................................................... 22
shadowOffsetY............................................................................................... 22
Comeando um Novo Desenho.........................................................................23
beginPath().................................................................................................... 23
moveTo(x,y)................................................................................................... 23
lineWidth........................................................................................................ 24
stroke().......................................................................................................... 24
closePath()..................................................................................................... 24
Semicrculos ou Seguimentos de Crculos.........................................................25
arc(x,y,r,anguloInicial,anguloFinal, sentido)...................................................25
www.iLearn.com.br

Curso de HTML5 Canvas .Pg | 1

Curso de HTML5
Educao e Informtica

iLearn

arcTo(x1,y1,x2,y2,r)....................................................................................... 28
Curvas Bezier.................................................................................................... 29
quadraticCurveTo........................................................................................... 29
bezierCurveTo................................................................................................ 30
Mtodos Adicionais........................................................................................... 30
lineJoin........................................................................................................... 30
globalAlpha.................................................................................................... 31
lineCap........................................................................................................... 31
Gradiente.......................................................................................................... 32
addColorStop(offset, cor)............................................................................... 32
createLinearGradiente(x,y,x1,y1)..................................................................32
createRadialGradiente(x,y,r,x1,y1,r1)............................................................33
Preenchendo formas com padres....................................................................33
createPattern(imagem, formaDeRepetio)...................................................33
Transformaes................................................................................................. 34
scale(x,y)....................................................................................................... 34
translate(x,y)................................................................................................. 35
rotate(ngulo)................................................................................................ 35
Trabalhando com Fontes................................................................................... 36
font................................................................................................................ 36
fillText(texto,x,y[,maxWidth]).........................................................................36
strokeText(texto,x,y[,cpMac]).........................................................................37
textAlign........................................................................................................ 37
textBaseline................................................................................................... 38
Imagens no Canvas........................................................................................... 38
Tcnica........................................................................................................... 38
drawImage..................................................................................................... 39
Recortando e Redimensionando Imagens.........................................................40
drawImage..................................................................................................... 40
Sprites............................................................................................................ 41
Utilizando udios............................................................................................... 41
Audio.............................................................................................................. 41
Construindo Animaes em Canvas..................................................................44
www.iLearn.com.br

Curso de HTML5 Canvas .Pg | 2

Curso de HTML5
Educao e Informtica

iLearn

Conceitos....................................................................................................... 44
setInterval() e setTimeout()...........................................................................45
requestAnimationFrame................................................................................. 46
Limpando o canvas........................................................................................ 47
Animao bsica............................................................................................ 48

www.iLearn.com.br

Curso de HTML5 Canvas .Pg | 3

Curso de HTML5
Educao e Informtica

iLearn

CANVAS API
Origem do Canvas
Em 2004 a Apple desenvolveu um elemento para desenhar em formato de pixel para as
telas do Mac OS X Dashboard. Mais tarde essa mesma tecnologia foi utilizada no
navegador Safari. Apesar de solues em pixel, em teoria, serem piores solues de
desenho em vetores, o canvas a melhor forma de animao no HTML5 para
necessidades mais complexas.
Quando no HTML ou XHTML precisvamos exibir grficos, o que era possvel era apenas
a exibio de grficos baseados em pixel, como o elemento <img> ou via CSS pelo
background-image,com suas imagens nos formatos JPEG, GIF, BMP ou PNG.
OBS: Temos observando, ao longo do tempo, que o formato PNG est se tornando um
padro em funo dos seus excelentes recursos. Hoje, em pases com banda larga,
realmente verdadeiras, esse formato largamente utilizado, pois reuni todos os recursos
do formato GIF e JPEG alm de possibilitar recursos para a Web, somente encontrados
no PNG (24 bit com transparncia).
O elemento <canvas> faz parte da especificao de aplicaes Web WHATWG 1.0
tambm conhecida como HTML5. A definio oficial da API Canvas, com suas
propriedades e mtodos, so definidas em http://www.whatwg.org/specs/webapps/current-work/multipage/the-canvas-element.html, sua documentao oficial, ou se
prefirir, em http://bit.ly/Xldzw pelo WHATWG como tambm em
http://www.w3.org/TR/2011/WD-2dcontext-20110405/ com short link em
http://bit.ly/qyYDVZpelo W3C.
A implementao do canvas se baseia em trs coisas bsicas: o elemento HTML canvas,
sua API e o JavaScript para executar o que desejarmos na tela. Poderamos associar o
canvas a um papel em branco e o lpis e a borracha ao JavaScript. Os dois juntos podem
fazer coisas realmente poderosas.

www.iLearn.com.br

Curso de HTML5 Canvas .Pg | 4

Curso de HTML5
Educao e Informtica

iLearn

No HTML5, voc pode agora, gerar imagens matematicamente, ou se preferir,

programaticamente (atravs de um programa com instrues especficas para isso). Os
novos formatos grficos utilizados pelo HTML5 so:

SVG (Scalable Vector Graphics) - Grficos Vetoriais Escalveis;

Canvas.

Por questes de programao e desempenho tem se preferido usar o recurso Canvas

para animaes onde a interatividade um dos principais fatores do seu projeto.
Produo de games, gerao de grficos mais complexos e muitos outros recursos, os
designers e programadores esto dando preferncia a utilizar os recursos do canvas.
A diferena entre essas duas linguagens que o SVG baseado em XML, e que deve
ser construda e exibida de forma bidirecional, ou seja, em 2D. Outra questo interessante
de comparao o fato de, com o SVG, podermos navegar pelo DOM (Document Object
Model) do documento. Por ser descrito via elementos que calculam dinamicamente os
grficos, o mesmo pode ser recalculado, caso haja alguma necessidade, ou seja, o
desenho armazenado atravs de frmulas matemticas e redesenhado sempre que
necessrio, logo podemos dizer ento que um desenho vetorial.

J o canvas bitmap, ou seja, nada de XML, nada de navegao pelo DOM. Tudo que
iremos manipular dentro do canvas ser atravs de uma linguagem script, a recomendada
claro, o JavaScript. O canvas, pelo menos oficialmente at agora, 2D, nica forma
possvel em sua recomendao oficial, embora alguns estudos mais avanados j
apontem o WebGL como sendo o canvas com contexto em 3D. o que esperamos que
oficialmente, seja anunciado nas prximas atualizaes do HTML5. Atualmente a
biblioteca three.js a biblioteca mais utilizada para o contexto 3D, mas isso assunto
para mais tarde, quando voc j dominar muito bem o canvas em 2D e o JavaScript. Em
canvas tudo desenhado dinamicamente e gerado em uma rea previamente definida.
Neste treinamento, iremos estudar o canvas no contexto 2D.
<canvas> um novo elemento encontrado na especificao do HTML5 em que, em sua
rea previamente definida, podemos desenhar formas, linhas, arcos, textos, gradientes e
www.iLearn.com.br

Curso de HTML5 Canvas .Pg | 5

Curso de HTML5
Educao e Informtica

iLearn

padres, atravs de uma linguagem de script, onde geralmente utilizaremos, como j

falamos, o JavaScript. Com esses recursos poderemos incrementar nossos sites, pois,
para determinados tipos de imagens no canvas, no precisaremos fazer download de
imagens, assim no se gasta trafego pela internet. Essas imagens so geradas e
renderizadas no navegador do usurio.
Tambm podemos usar o canvas para desenhar grficos em conjunto com fotos, se for o
interesse, e at mesmo fazer animaes. Cuidado!, caso tenha interesse em animaes
e/ou adicionar interatividade, voc precisar conhecer o JavaScript muito bem. Outro
detalhe importante: lembre-se que animaes em Flash, por exemplo, no executado
em dispositivos como o iPhone e iPad, mas o canvas sim. Lembre-se que o canvas foi
criado pela Apple. Seria por isso que o Flash no roda nesses dispositivos?
Conselho aos designers: Caso tenha alguma rejeio programao, passem a gostar de
lgica de programao e JavaScript! Cada vez mais estamos percebendo a necessidade
desses profissionais caminharem nesta direo.
Neste captulo iremos desenhar grficos, compor desenho com fotos e at mesmo fazer
uma animao simples.

A evoluo da especificao
Algumas boas sugestes foram dadas pelo WHATWG para incrementar a especificao
do canvas, ainda no implementados nos navegadores.
O mtodo ellipse() - Mtodo que cria um caminho no formato de elipse.
Realmente est na especificao do WHATWG em interface CanvasPathMethods,
como mostro abaixo:
void ellipse(unrestricted double x, unrestricted double y,
unrestricted double radiusX, unrestricted double radiusY,
unrestricted double rotation, unrestricted double startAngle,
unrestricted double endAngle, boolean anticlockwise);

www.iLearn.com.br

Curso de HTML5 Canvas .Pg | 6

Curso de HTML5
Educao e Informtica

iLearn

Apesar do mtodo ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle,

anticlockwise), estar declarado, at o momento da confeco dessa apostila, no havia
sido implementado em nenhum navegador.

Dois novos mtodos. getLineDash() e setLineDash() alm do atributo lineDashOffset,

usado para desenhar linhas tracejadas.

Trabalhando com o <canvas>

Logo, como criar essas imagens bitmaps no canvas? Bem, primeiro temos que entender
que a palavra canvas representa uma rea til de trabalho.
Como disse anteriormente, para trabalharmos com o elemento <canvas>, alm do
conhecimento de HTML tambm precisaremos do conhecimento de JavaScript, ao menos
o bsico para iniciarmos. Todo o cdigo que utilize o JavaScript em nossos exerccios
oficiais sero ensinados pelo professor.

Suporte dos navegadores

Veja no quadro abaixo a adeso dos navegadores ao elemento <canvas>:

Figura - Suporte aos navegadores - fonte: http://findmebyip.com/litmus

www.iLearn.com.br

Curso de HTML5 Canvas .Pg | 7

Curso de HTML5
Educao e Informtica

iLearn

Figura - Suporte ao Canvas (basic) - fonte: http://www.caniuse.com/#search=canvas

Figura - Suporte ao Text API for Canvas - fonte: http://www.caniuse.com/#search=canvas

Figura - Suporte ao CSS Canvas - fonte: http://www.caniuse.com/#search=canvas

www.iLearn.com.br

Curso de HTML5 Canvas .Pg | 8

Curso de HTML5
Educao e Informtica

iLearn

O elemento <canvas>
Sintaxe:
<canvas></canvas>
Por padro, quando no informamos explicitamente o tamanho ocupado pelo <canvas>,
com as propriedades width (comprimento) e height (altura), atravs da API do <canvas>, o
mesmo assume as dimenes de 300px de comprimento por 150px de altura.
Caso queira definir um tamanho especfico para o canvas, deve faz-lo de forma explicita,
ou seja, definindo os seus valores:
<canvas width=400 height=300></canvas>
Desta forma, a rea til a ser manipulada pelo JavaScript passa a ser de 400px de largura
por 300px de altura.
Para que o JavaScript possa manipular mais de um elemento canvas na pgina,
recomendado identificar o elemento com um id, logo teremos:
<canvas id=desenho1 width=400 height=300></canvas>

O elemento <canvas> com suas propriedades de largura e altura definem a rea de

atuao do canvas. O CSS no atua sobre o canvas, mas somente na rea que envolve
o canvas.
Obs: O canvas, como j vimos, possui dois propriedades para utilizarmos sua largura
mxima e altura mxima, mesmo que no saibamos as suas dimenses. Podemos usar o
canvas.width para usarmos a largura total do canvas e o canvas.height para
manipularmos a altura total do canvas. Essas so propriedades previamente criadas pelo
canvas.
O elemento <canvas> pode ser estilizado pelo CSS, mas como se fosse uma imagem, ou
seja, s podemos alterar sua margem, borda, background etc. Como vimos, nenhuma
regra de CSS pode alterar o desenho realizado pela API do canvas ou pelo JavaScript.
www.iLearn.com.br

Curso de HTML5 Canvas .Pg | 9

Curso de HTML5
Educao e Informtica

iLearn

Por definio o background de um elemento <canvas> transparente.

Veja o exemplo em ex1-transp.html
O atributo id(uniqueidentifier) no especificado na definio do <canvas>, mas por ser
um atributo global (presente em todos os elementos HTML) seu uso permitido. Apenas
as propriedade de width (largura) e height (altura) so definidas como propriedades
possveis para o elemento <canvas>.

Fallback
Na implementao original do <canvas>, pela Apple em seu Safari, o elemento <canvas>
no precisava do fechamento (</canvas>), mas como o elemento <canvas> foi muito
difundido pela Web, algumas facilidades, como um contedo para fallback, foram ento
oferecida para a comunidade. O navegador Mozilla Firefox implementou a obrigatoriedade
da tag de fechamento </canvas>. Logo, apesar de no necessria para o Safari,
recomendamos sempre o uso da tag de fechamento.

O que Fallback?
Pelo fato do elemento canvas ser relativamente novo e ainda no ser implementado pela
totalidade dos chamados grandes navegadores de mercado, faz-se necessrio uma
alternativa para esses navegadores. A essa tcnica chamamos de fallback.
A tcnica muito simples, basta oferecermos um contedo alternativo dentro do elemento
canvas. Os navegadores que no suportam o elemento canvas, simplesmente ignoram o
container canvas exibindo apenas o seu contedo. Para os navegadores que renderizam
o elemento canvas o fazem normalmente, ignorando o fallback em seu interior e
considerando as parametrizaes encontradas no canvas. O contedo com a
implementao do fallback no obrigatrio, mas recomendado para uma melhor
experincia do usurio.

www.iLearn.com.br

Curso de HTML5 Canvas .Pg | 10

Curso de HTML5
Educao e Informtica

iLearn

OBS: claro que existe limite para tudo isso, pois imagine um jogo muito complexo
desenvolvido em canvas e JavaScript, muito provvel, que voc no ir desenvolver
todo o jogo novamente em ActionScript 3, linguagem de programao do Flash. Essa
uma aplicao que no teremos um fallback funcional, poderamos apenas dizer que seu
navegador no suporta o elemento canvas do HTML5.
A seguir temos alguns exemplos de fallback para o elemento <canvas>.

<canvas id="desenho1"width="400"height="300">
<p>Dolar oficial hoje: Compra: 1,5790 - Venda: 1,5810</p>
</canvas>
Exemplo de fallback com o uso pargrafo (texto) como alternativa

Outro exemplo
<canvas id="desenho1" width="400" height="300">
<img src="_recursos/img/grafico.png" width="400" height="300"
alt="grfico com cotaes do dolar oficial"
longdesc="_recursos/longdesc/cotacao.html">
</canvas>
Exemplo de fallback com o uso de imagem como alternativa

Outro exemplo
<canvas id="desenho1" width="400" height="300">
<object
www.iLearn.com.br

Curso de HTML5 Canvas .Pg | 11

Curso de HTML5
Educao e Informtica

iLearn

type="application/x-shockwave-flash"
data="arquivo.swf"
codebase="http://download.macromedia.com/pub/shock
wave/cabs/flash/swflash.cab#version=7,0,0,0"
width="468"
height="60">
<param

name="movie"
value="arquivo.swf">

<param

name="quality"
value="high">

<param

name="allowFullScreen
value="true">

<param

name="allowscriptaccess
value="always">

</object>
</canvas>
Exemplo de fallback com o uso do Adobe Flash como alternativa

Veja o exemplo em ex2-fallback.html

Coordenadas Cartesianas
Chama-se Sistema de Coordenadas no plano cartesiano ou espao cartesiano ou
plano cartesiano um esquema reticulado necessrio para especificar pontos num
determinado "espao" com dimenses. Cartesiano um adjetivo que se refere ao
matemtico francs e filsofo Descartes que, entre outras coisas, desenvolveu uma
sntese dalgebra com a geometria euclidiana.
http://pt.wikipedia.org/wiki/Sistema_de_coordenadas_cartesiano
As coordenadas para o contexto 2D so diferentes da que aprendemos na escola. Veja a
figura a seguir, observando que para a direita e para baixo os valores so positivos.
www.iLearn.com.br

Curso de HTML5 Canvas .Pg | 12

Curso de HTML5
Educao e Informtica

iLearn

Figura - Coordenadas de referncia para o elemento canvas.

Verificar suporte do canvas no navegador

Podemos avaliar o suporte do browser ao elemento canvas pelo cdigo abaixo.

var canvas = document.getElementById('desenho1');

if (canvas.getContext){
var ctx = canvas.getContext('2d');
// cdigo para desenhar no canvas
} else {
// cdigo para navegadores sem suporteao elemento canvas
}
Veja o exemplo em ex3-suport.html

Contexto de Renderizao
O elemento canvas cria uma regio de desenho, com tamanho fixo com um ou mais
contextos de renderizao, que so usados para criar e manipular o contedo exibido
no agente do usurio. Vamos nos concentrar no contexto 2D. Outros contextos podem
nos fornecer diferentes tipos de renderizao, como por exemplo, o contexto 3D, que
www.iLearn.com.br

Curso de HTML5 Canvas .Pg | 13

Curso de HTML5
Educao e Informtica

iLearn

baseado no OpenGL ES e que por enquanto recebe o cognome de experimental

WebGL.
OBS: Para quem deseja ver exemplos de sites e aplicativos desenvolvidos com canvas
nos contextos 2D ou em 3D, recomendamos a visita ao site
http://www.html5gallery.com.br
Para comearmos a escrever no container necessrio definir em qual contexto voc
deseja desenhar.
Hoje, como j falamos anteriormente, s possvel de manipulao oficialmente, do
contexto 2D. O elemento canvas possui um mtodo DOM chamado getContext, usado
para obter o contexto de processamento e suas funes de desenho. getContext() possui
um parmetro, o seu tipo de contexto.
A sintaxe ento seria:
var canvas = document.getElementById('desenho1');
var ctx = canvas.getContext('2d');
ctx o nome da varivel de contexto e clssico cham-lo de ctx, que significa contexto
ou context em ingls.
Na primeira linha, obtemos o n DOM do canvas usando o mtodo do JavaScript
getElementById. Agora podemos acessar o contexto de desenho com o mtodo
getContext.

Cdigo Bsico para o Canvas

Passaremos a escrever um cdigo, que chamaremos de template, pois todos os
exerccios que criaremos daqui para frente sero baseados nesse cdigo.
<!DOCTYPE HTML>
<html>
<head>
<title>Canvas</title>
<script type="text/javascript">
www.iLearn.com.br

Curso de HTML5 Canvas .Pg | 14

Curso de HTML5
Educao e Informtica

iLearn

function desenha(){
var canvas = document.getElementById('desenho1');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
}
}
</script>
<style type="text/css">
canvas {
border: 1px solid #000;
margin: 0 auto;
display: block;
}
h1 {
text-align:center;
font-size:1.2em;
font-family: Arial, Helvetica, sans-serif;
color: #A6A6A6;
}
</style>
</head>
<body onload="desenha();">
<h1>iLearn - HTML5 Canvasex4-template.html</h1>
<canvas id="desenho1" width="800" height="500">
</canvas>
</body>
</html>
Veja o exemplo em ex4-template.html
Com o template criado, vamos passar para o nosso primeiro exemplo usando a API do
canvas para desenhar, mas antes iremos aprender os primeiros comandos que usaremos
para criar desenhos no canvas.

Comenando a Desenhar
Passaremos agora a estudar a API do canvas. Seus mtodos e propriedades.
No canvas primeiro passaremos os atributos para s depois mandar desenhar na tela.
No adiantar nada tentar mudar uma propriedade depois de desenhado.

fillStyle

www.iLearn.com.br

Curso de HTML5 Canvas .Pg | 15

Curso de HTML5
Educao e Informtica

iLearn

Este atributo define a cor de preenchimento para o elemento criado. Os valores

vlidos so os mesmos valores vlidos para o CSS, ou seja, pelo nome da cor,
RGB (hexa ou percentual), RGBA (hexa ou percentual), HSL e HSLA.Exemplos:
Declarao pelo nome da cor:

ctx.fillStyle= "blue";

Declarao pelo RGB:

ctx.fillStyle="rgb(200,0,0)"

Declarao pelo RGBA

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

Declarao pelo RGB Percentual

ctx.fillStyle= "rgb(100%,0%,0%)"

Declarao por hexadecimal

ctx.fillStyle= "#0f0"

Declarao por HSLA

ctx.fillStyle = 'hsla( 120.0 , 100.0% ,

50.0% , 1 )'
Para que possamos ver as cores acima definidas, precisamos de um
objeto, que faremos agora com o elemento fillRect, para desenhar um
retngulo com preenchimento.

fillRect(x,y,l,a)
Este mtodo preenche com uma corslida (fill) um retngulo (Rect). Comeando pelo
ponto x e y, referente ao canto superior esquerdo e com os parmetros de a largula (l) e
altura (a) do objeto. Caso nenhuma cor seja definida, o preenchimento por default ser da
cor preta.
Cdigo:

ctx.fillRect(50, 50, 200, 100);

Resultado:

www.iLearn.com.br

Curso de HTML5 Canvas .Pg | 16

Curso de HTML5
Educao e Informtica

iLearn

Figura Retngulo definido com os parmetros acima e sem definio de cor

Observe que o retngulo do exemplo comea a ser desenhado no ponto (50,50) com 200px de
largura e 100px de altura.

Cdigo do primeiro programa usando a API do canvas

<!DOCTYPE HTML>
<html>
<head>
<title>Canvas</title>
<script type="text/javascript">
function desenha(){
var canvas = document.getElementById('desenho1');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.fillStyle="rgb(200,0,0)";
ctx.fillRect(10,10,155,150);
ctx.fillStyle="rgba(0,0,200,0.5)";
ctx.fillRect(60,60,155,150);
}
}
</script>
<style type="text/css">
canvas {
border: 1px solid #000;
margin: 0 auto;
display: block;
}
h1 {
text-align:center;
font-size:1.2em;
font-family: Arial, Helvetica, sans-serif;
color: #A6A6A6;
}
</style>
www.iLearn.com.br

Curso de HTML5 Canvas .Pg | 17

Curso de HTML5
Educao e Informtica

iLearn

</head>
<body onload="desenha();">
<h1>iLearn - HTML5 Canvas - ex5-fillRect.html</h1>
<canvas id="desenho1" width="800" height="500">
</canvas>
</body>
</html>
Cdigo do arquivo (ex5-fillRect.html)do primeiro programa usando a API do canvas
Como resultado,teremos a imagem a seguir:

Figura representando a imagem gerada pelo canvas do ex5-fillRect.html

rect(x,y,l,a)
Este mtodo desenha um retngulo. Comeando pelo ponto (x,y), referente ao canto
superior esquerdo e com os parmetros de a largura (l) e altura (a) do objeto.
Este mtodo s renderizado no vdeo quando utilizamos um outro mtodo chamado
fill(), que passa a preencher todos os objetos criados mas no renderizados, como foi o
caso do mtodo rect.

www.iLearn.com.br

Curso de HTML5 Canvas .Pg | 18

Curso de HTML5
Educao e Informtica

iLearn

fill()
Este mtodo preenche com uma cor slida um path.
Cdigo:

ctx.rect(200,50,100,100);
ctx.fill();
Resultado:

Figura Retngulo definido com os parmetros acima e sem definio de cor

Veja o exemplo em ex6-rect-fill.html onde utilizamos o rect e o fill.

<script type="text/javascript">
function desenha(){
var canvas = document.getElementById('desenho1');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
// definindo uma cor para o retngulo
ctx.fillStyle="rgb(200,0,0)";
// desenhado o retngulo
ctx.rect (10,10,155,150);
// fazendo o retngulo aparecer na tela com o
// preenchimento anteriormente definido
ctx.fill();
}
}
</script>

www.iLearn.com.br

Curso de HTML5 Canvas .Pg | 19

Curso de HTML5
Educao e Informtica

iLearn

Limpando Parte do Desenho

clearRect(x,y,l,a)
Este mtodo tem como objetivo limpar (clear) em um formato de retngulo (Rect) nos
elementos j desenhados no canvas.
Cdigo:

ctx.clearRect(10,10,100,70);
Resultado:

Figura Ao do clearRect sobre o exemplo anterior

Veja parte do cdigo do ex7-clearRect.html incrementado pelo cdigo da limpeza

de um pedao determinado do canvas:
// definindo uma cor para o retngulo
ctx.fillStyle="rgb(200,0,0)";
// desenhado o retngulo
ctx.rect (10,10,155,150);
// fazendo o retngulo aparecer na tela com
// o preenchimento definido
ctx.fill();
// limpando uma poro do canvas
ctx.clearRect(10,10,100,70);

www.iLearn.com.br

Curso de HTML5 Canvas .Pg | 20

Curso de HTML5
Educao e Informtica

iLearn

Trabalhando com Bordas

strokeStyle
Este mtodo define a cor do contorno criado. Os valores vlidos so os mesmos valores
vlidos para o CSS, ou seja, pelo nome da cor, RGB (hexa ou percentual), RGBA (hexa
ou percentual), HSL e HSLA. O strokeStyle deve ser usado em conjunto com o strokeRect
que iremos aprender no prximo tpico.
Caso o valor da cor no seja informado o canvas assume por default a cor preta
(#000000).
Exemplo:

ctx.strokeStyle="rgb(200,0,0)";

strokeRect(x,y,l,a)
Este mtodo desenha um contorno, comeando pelo ponto x,y, referente ao canto
superior esquerdo e com os parmetros de altura (a) e largura (l) do objeto.

Veja o cdigo da utilizao do strikeStyle e do strokeRect

// definindo a cor da bordar
ctx.strokeStyle = "rgb(100,0,0)";
// definindo o espao ocupado pela borda
ctx.strokeRect(100,100,300,300);
Veja o exemplo em ex8-strokeRect.html

www.iLearn.com.br

Curso de HTML5 Canvas .Pg | 21

Curso de HTML5
Educao e Informtica

iLearn

Trabalhando com Sombras

shadow
Colocar uma sombra (shadow) em um objeto do canvas com as seguintes propriedades:

shadowColor
Define a cor da sombra. Os valores vlidos so os mesmos valores vlidos para o CSS,
ou seja, pelo nome da cor, RGB (hexa ou percentual), RGBA (hexa ou percentual), HSL e
HSLA.

shadowOffsetX
Definem o deslocamento no eixo X da sombra do objeto. Os valores podem ser positivos
(direita) ou negativos (esquerda).

shadowOffsetY
Definem o deslocamento no eixo Y da sombra do objeto. Os valores podem ser positivos
(para baixo) ou negativos (para cima).

shadowBlur
Define o desfoque do shadow.
Exemplo:

// aplicando sobreamento
ctx.shadowColor = "rgb(100,0,0)";
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
ctx.shadowBlur = 20;
// definindo a cor da bordar
www.iLearn.com.br

Curso de HTML5 Canvas .Pg | 22

Curso de HTML5
Educao e Informtica

iLearn

ctx.strokeStyle = "rgb(100,0,0)";
// definindo o espao ocupado pela borda
ctx.strokeRect(100,100,300,300);
Veja o exemplo em ex9-shadow.html

Comeando um Novo Desenho

beginPath()
Este mtodo reseta o path (caminho) atual, permitindo a criao de um novo path
(caminho).Todo caminho novo deve comear com esse mtodo. Este mtodo no possui
parametrizao.
Exemplo:

ctx.beginPath();

moveTo(x,y)
Este mtodo posiciona a ponta da caneta para desenhar em outro ponto (x,y). Cabe
lembrar, que esse mtodo no arrasta desenhando, ele levanta a ponta da caneta e
desloca-se at o ponto (x,y) desejado.
Exemplo:

ctx.moveTo(0,0);

lineTo(x,y)
Este mtodo desenha da posio atual (x_atual, y_atual) at a posio final (x,y), passado
como parmetro desse mtodo, uma linha reta.
www.iLearn.com.br

Curso de HTML5 Canvas .Pg | 23

Curso de HTML5
Educao e Informtica

Exemplo:

iLearn

ctx.lineTo(200,100);

lineWidth
Define a espessura das linhas a serem desenhadas a partir dessa definio. A unidade
em pixel e somente nmeros inteiros. Para que ela venha a aparecer, necessrio
informarmos valores maiores que zero, que o default e no exibido absolutamente
nada.
Exemplo:

ctx.lineWidth = 5;

stroke()
Stroke significa acesso, lanamento. Este mtodo aplica os estilos definidos pelos
atributos no caminho imediatamente construido. Em muitos casos, a no aplicao do
stroke no faz o objeto desenhado aparecer na tela do computador.
Uma das suas aplicaes seria no caso do uso de moveTo e lineTo, por exemplo.

Exemplo:

ctx.stroke();

closePath()
Este mtodo fecha um caminho aberto, caso voc no o tenha fechado. Quando esse
mtodo invocado, uma linha reta ligar os pontos iniciais e finais desse path atual.

Exemplo:

ctx.closePath();

Veja o exemplo em ex10-lines.html

www.iLearn.com.br

Curso de HTML5 Canvas .Pg | 24

Curso de HTML5
Educao e Informtica

iLearn

Semicrculos ou Seguimentos de Crculos

O canvas nos oferece 4 mtodos que podemos utilizar para desenharmos arcos.
Entendemos arcos e curvas na tela. Um arco pode ser um crculo ou qualquer
parte de um crculo.

arc(x,y,r,anguloInicial,anguloFinal, sentido)
Este mtodo desenha um arco com o centro nas coordenadas x, y com raio definido pelo
parmetro r e com ngulo inicial e final em radianos (positivo ou negativo). O sentido pode
ser anti-horario(sentido positivo na trigonometria) representado pelo true ou pelo sentido
horrio (sentido negativo na trigonometria) representado pelo false.
Horrio

= false

Anti-horario = true
Observao importante: A unidade dos ngulos o radiano e no em graus. Para um
melhor entendimento, necessitaremos converte-la.

Exemplo:

Math.PI/2

= 90 graus

Math.PI

= 180 graus

Math.PI * 2

= 360 gruas

3/2 * Math.PI

= 270 graus

Para calcular qualquer ngulo especfico em radiano, conhecendo-se o valor desejado em

graus, use a regra de trs para obter fator de PI desejado.
360-------2 PI
90 ------- x

logo x = 0.5 PI 90 graus

Cdigo:
ctx.beginPath();
ctx.strokeStyle = "black";
www.iLearn.com.br

Curso de HTML5 Canvas .Pg | 25

Curso de HTML5
Educao e Informtica

iLearn

ctx.lineWidth = 5;
//circulocompleto
ctx.arc(400, 100, 50, (Math.PI/180)*0,(Math.PI/180)*360, true);
ctx.stroke();
ctx.closePath();

Resultado

Figura Renderizao do mtodo arc

Observe que tivemos que converter nossos ngulos de 0 e 360 para radiano com a
multiplicao de (Math.PI/180). Para o ngulo 0 temos ento (Math.PI/180)*0 e para a
converso do ngulo de 360 temos (Math.PI/180)*360.

Veja o exemplo em ex11-arc360.html

Agora iremos estudar o caso do semicrculo. Observe a figura abaixo do crculo gerada no
exerccio anterior.

Figura Consideraes iniciais para o entendimento do mtodo arc

Vamos agora, criar um de arco, ou seja, de 0 at 90 graus. Logo nosso comando em

canvas ser:
ctx.arc(100, 200, 20, (Math.PI/180)*0, (Math.PI/180)*90, false);

Veja como o resultado final est absolutamente certo.

www.iLearn.com.br

Curso de HTML5 Canvas .Pg | 26

Curso de HTML5
Educao e Informtica

iLearn

Figura Observe que realmente obtivemos um ngulo reto e

no sentido horrio (false)
Veja o exemplo em ex12-arc90-hor.html
Para o ngulo de 180 graus, teramos cdigo e imagem a seguir, e assim
sucessivamente.
Cdigo:
ctx.arc(100,200,20,(Math.PI/180)*0,(Math.PI/180)*180,false);

Resultado:

Veja o exemplo em ex13-arc180-hor.html

Caso desejssemos o semicrculo pelo outro lado, ou seja, o anti-horrio, basta
passarmos o parmetro true para darmos o novo sentido de direo ao semicrculo
desejado.
Cdigo:
Context.arc(100,200,20,(Math.PI/180)*0, (Math.PI/180)*90, true);
Resultado:

Veja o exemplo em ex14-arc180-anthor.html

www.iLearn.com.br

Curso de HTML5 Canvas .Pg | 27

Curso de HTML5
Educao e Informtica

iLearn

arcTo(x1,y1,x2,y2,r)
Tambm conhecida como curvas quadrticas. O mtodo arcTo s foi implementado nas
ltimas verses dos navegadores modernos, talvez pelo fato que o resultado do arcTo
pode ser obtido pelo mtodo arc.
Do ponto (x1,y1) o mtodo calcula uma linha reta at o ponto (x2,y2), em seguida o
mtodo desenha um arco que envolve esses dois pontos usando o raio dado.
O mtodo arcTo s funciona se houver no caminho corrente um subpath. Vamos comear
traando um linha de (0,0) at (100,200).

Figura Observe as linhas imaginrias

Cdigo:
ctx.moveTo(0,0);
ctx.lineTo(100, 200);
ctx.arcTo(350,350,100,100,30);
Veja o exemplo em ex15-arcTo.html

www.iLearn.com.br

Curso de HTML5 Canvas .Pg | 28

Curso de HTML5
Educao e Informtica

iLearn

Curvas Bezier
As curvas de Bezier so mais flexveis que os arcos. Possuem 2 mtodos
distintos, um cbica (Bezier) e outro mtodo quadrtica.

ctx.quadraticCurveTo(cpx, cpy, x, y)
ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

quadraticCurveTo
ctx.moveTo(0,0);
ctx.quadraticCurveTo(100,25,0,350);

Veja o exemplo em ex16-quadraticCurveTo.html

www.iLearn.com.br

Curso de HTML5 Canvas .Pg | 29

Curso de HTML5
Educao e Informtica

iLearn

bezierCurveTo
ctx.moveTo(150,0);
ctx.bezierCurveTo(0,125,300,175,150,300);

Veja o exemplo em ex17-bezierCurveTo.html

Se voc quiser saber mais sobre a curva de Bzier acesse o link

http://bit.ly/188V3aN.

Mtodos Adicionais
lineJoin
Este atributo define a forma de unio das linhas. Os valores possveis so: miter, bevele
round.

Exemplo:

ctx.lineJoin=valor;

www.iLearn.com.br

Curso de HTML5 Canvas .Pg | 30

Curso de HTML5
Educao e Informtica

iLearn

Figura com exemplos de tipos de lineJoin no HTML5: miter, round, e bevel

respectivamente.

Veja o exemplo em ex18-lineJoin.html

globalAlpha
Este atributo define uma transparncia aplicada a todos os elementos do canvas. Os
valores possveis variam de 0 (transparncia total) at 1 (opacidade total). Sua aplicao
passa a valer aps o ponto no cdigo que o globalAlpha foi aplicado.

Exemplo:

ctx.globalAlpha = "0.5";

Figura com o quadrado da esquerda com opacidade e o da esquerda no

Veja o exemplo em ex19-globalAlpha.html

lineCap
Este atributo, destina-se a definir a forma de acabamento das extremidades das linhas.
Os valores possveis so: butt, round e square.
www.iLearn.com.br

Curso de HTML5 Canvas .Pg | 31

Curso de HTML5
Educao e Informtica

Exemplo:

iLearn

ctx.lineCap=valor;

Figura - Exemplo de lineCap - butt (acima), round (meio) e square (abaixo)

Veja o exemplo em ex20-lineCap.html

Gradiente
Para definirmos um gradiente, precisamos de algumas definies. O ponto inicial e final
do retngulo que receber o gradiente e a cor inicial e final para montar o gradiente.

addColorStop(offset, cor)
Este mtodo define as cores do gradiente. O valor para offset pode variar de 0 at 1.
O valor 0 define a cor inicial do gradiente e 1 a cor final. Observe que se o gradiente
necessitar mais de uma cor, podemos usar valores intermedirios para definir esse
gradiente. Com isso podemos ter um gradiente de mltiplas cores, basta voc aplica
vrias vezes o mtodo addColorStop.

createLinearGradiente(x,y,x1,y1)
www.iLearn.com.br

Curso de HTML5 Canvas .Pg | 32

Curso de HTML5
Educao e Informtica

iLearn

Este mtodo definido pelos pontos (x,y), o canto superior esquerdo do retngulo que ter
um gradiente linear at o ponto (x1,y1).
Exemplo:

gt = ctx.createLinearGradient(10,10, 200,400);
gt.addColorStop(1, '#f00');
gt.addColorStop(0, '#ff0');
ctx.fillStyle = gt;
ctx.fillRect(10,10, 200,400);
gt2 = ctx.createLinearGradient(250,10, 200,400);
gt2.addColorStop(1, '#f00');
gt2.addColorStop(0, '#ff0');
ctx.fillStyle = gt2;
ctx.fillRect(250,10, 200,400);
ctx.fill();

Veja o exemplo em ex21-createLinearGradient.html

createRadialGradiente(x,y,r,x1,y1,r1)
Este mtodo cria um gradiente radial. Os pontos (x,y) e (x1,y1) definem os centros dos
crculos que definem onde comea e termina, respectivamente, o gradiente, assim como
os parmetros r e r1 definem seus raios.
Exemplo

gt = ctx.createRadialGradient(130,60,10,130,60,160);
gt.addColorStop(0, '#f00');
gt.addColorStop(1, '#ff0');
ctx.fillStyle = gt;
ctx.fillRect(10,10, 200,400);

Veja o exemplo em ex22-createRadialGradient.html

Preenchendo formas com padres

www.iLearn.com.br

Curso de HTML5 Canvas .Pg | 33

Curso de HTML5
Educao e Informtica

iLearn

createPattern(imagem, formaDeRepetio)
Este mtodo permite usarmos uma imagem como preenchimento de uma forma.
O parmetro imagem, define a imagem a ser utilizada. Ela pode ser um elemento img ou
um vdeo.
O parmetro fomaDeRepetio define a forma como a imagem ir ocupar, a
saber:repeat, no-repeat, repeat-x e repeat-y.
Exemplo:

var img = new Image();

img.src = 'imgs/20x20.gif';
img.onload = function(){
// criandopadro
var ptrn = ctx.createPattern(img,'repeat');
ctx.fillStyle = ptrn;
ctx.fillRect(0,0,100,100);
}

Resultado:

Veja o exemplo em ex23-createPattern.html

Transformaes
scale(x,y)
Este mtodo responsvel por scalartodos os grficos contidos no canvas.

Exemplo:

var rectWidth =100;

var rectHeight = 100;

www.iLearn.com.br

Curso de HTML5 Canvas .Pg | 34

Curso de HTML5
Educao e Informtica

iLearn

ctx.translate(canvas.width/2, canvas.height/2);
ctx.scale(2, 2);
ctx.fillStyle = "blue";
//Para deixar o centro depois da escala no mesmo
ponto
ctx.fillRect(-rectWidth/2, -rectHeight/2,
rectWidth, rectHeight);
Veja o exemplo em ex24-scale.html

translate(x,y)
Este mtodo desloca para um valor X e/ou Y as coordenadas da origem do canvas, ou
seja, desloca todos os grficos contido no canvas.
Exemplo:

var rectWidth = 100;

var rectHeight = 100;
// Translada para o centro do canvas
ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.fillStyle = "blue";
ctx.fillRect(-rectWidth/2, -rectHeight/2,
rectWidth, rectHeight);

Veja o exemplo em ex25-translate.html

rotate(ngulo)
Este mtodo faz com que os desenhos do canvasrotacionem.
Exemplo:

var rectWidth = 150;

var rectHeight = 75;
ctx.translate(canvas.width / 2, canvas.height / 2);
// rotaciona 45 graus no sentido horrio (PI = 180)
ctx.rotate(Math.PI / 4);

www.iLearn.com.br

Curso de HTML5 Canvas .Pg | 35

Curso de HTML5
Educao e Informtica

iLearn

ctx.fillStyle = "blue";
ctx.fillRect(-rectWidth / 2, -rectHeight / 2,
rectWidth, rectHeight);

Resultado:

Veja o exemplo em ex26-rotate.html

Trabalhando com Fontes

font
A fonte que ser utilizada para desenhar textos no canvas pode ser consultada e alterada
atravs da propriedade font, essa propriedade uma string no formato
TamanhoUnidadeNome da Fonte, por exemplo 12px Times New Roman.

fillText(texto,x,y[,maxWidth])
Este mtodo destina-se a desenhar o texto preenchido. O parmetro texto pode ser uma
varivel que contenha texto. Os parmetros x e y so as coordenadas de onde o texto
comear a ser escrito. O parmetro opcional maxWidth define o comprimento mximo,
quando enviado, faz com que o texto diminua de tamanho para caber nessa
especificao.

www.iLearn.com.br

Curso de HTML5 Canvas .Pg | 36

Curso de HTML5
Educao e Informtica
Exemplo:

iLearn

ctx.font = "5em arial"

ctx.fillStyle = "#0000FF";
ctx.fillText ("Alunos do iLearn", 100, 80);

strokeText(texto,x,y[,cpMac])
Este mtodo semelhante ao fillText, mas seu objetivo exibir somente as bordas do
texto. A cor do contorno definido pela propriedade strokeStyle.
Exemplo:

ctx.font = "5em arial"

ctx.strokeStyle = "#F00";
ctx.strokeText ("Borda de texto em vermelho", 100, 80);

Veja o exemplo em ex27-text.html

textAlign
O alinhamento do texto pode ser definido pela propriedade textAlign, seus valores podem
ser left, right, center, start e end (start equivale a left e end equivale a right),
sendo left o padro. O alinhamento feito apartir de uma linha vertical imaginria que
passa pela posio X do texto.
center - A linha se encontra no meio do texto
left - A linha se encontra a esquerda do texto e o texto desenhado apartir dessa linha
right - A linha se encontra a direita do texto e o texto desenhado atrs dessa linha
ctx.font = "12px Times New Roman";
ctx.fillStyle = "#000";
ctx.textAlign = "center";
ctx.fillText("Meio", 100, 20);
ctx.textAlign = "left";
ctx.fillText("Linha esquerda", 100, 30);
ctx.textAlign = "right";
ctx.fillText("Linha direita", 100, 40);
Produz:
www.iLearn.com.br

Curso de HTML5 Canvas .Pg | 37

Curso de HTML5
Educao e Informtica

iLearn

Para visualizar essa linha podemos incluir um cdigo que a desenhe:

ctx.strokeStyle = "#00f";
ctx.beginPath();
ctx.moveTo(100, 0);
ctx.lineTo(100, 50)
ctx.stroke();
ctx.closePath();

Veja o exemplo em ex28-textAlign.html

textBaseline
Esta propriedade destina-se a determinar o alinhamento em relao a baseline do texto.

Veja o exemplo em ex29-textBaseLine.html

www.iLearn.com.br

Curso de HTML5 Canvas .Pg | 38

Curso de HTML5
Educao e Informtica

iLearn

Imagens no Canvas
Tcnica
Vamos desenhar uma imagem no canvas. Primeiro deve-se carregar a imagem
normalmente atravs de um elemento image. Utilizando o mtodo
document.createElement(image) ou o construtor Image(), como mostro no exemplo a
seguir.
var img = new Image();
img.onload = function() {
imagemCarregada(ctx, img);
};
img.setAttribute("src", "_recursos/img/html5.png");
No cdigo acima um elemento Image criado, depois adicionamos um evento onload
que ser disparado quando a imagem estiver carregada e pronta para ser usada no
canvas, esse evento chama a funo ImagemCarregada e envia como argumento para o
CanvasContext que representa uma variavel de um contexto 2D do canvas e this que
representa a prpria imagem. S depois o atributo src da imagem alterado para a URI
do arquivo, que o navegador inicia o carregamento da imagem.
importante mudar o atributo src apenas depois de se criar o evento onload, pois
quando a pgina executada localmente ou a imagem se encontra no cache do
navegador ela pode carregar antes de o evento ser propriamente criado e ento ele no
ser disparado.

drawImage
Agora vamos desenhar a imagem no canvas.
function imagemCarregada(ctx, img) {
ctx.drawImage(img, 10, 10);
//ctx.drawImage(img, 10, 10, img.width, img.height);
}
Essa funo desenha a imagem img no canvas do contexto ctx na posio (0,0).
www.iLearn.com.br

Curso de HTML5 Canvas .Pg | 39

Curso de HTML5
Educao e Informtica

iLearn

O contexto do canvas oferece o mtodo drawImage tendo como o primeiro argumento a

prpria imagem, como segundo argumento a posio no eixo X e em terceiro a posio
no eixo Y para desenhar a imagem.

Recortando e Redimensionando Imagens

drawImage
O mtodo drawImage pode ser utilizado com um maior nmero de argumentos com a
finalidade de se recortar e redimensionar uma parte da imagem.
Esses argumentos so:
drawImage(imagem, inicioX, inicioY, largura, altura, destinoX, destinoY, larguraFinal,
alturaFinal);
Onde cada argumento representa:
imagem - A imagem a ser recortada
inicioX - A posio no eixo X para se iniciar o recorte
inicioY - A posio no eixo Y para se iniciar o recorte
largura - A largura do recorte que ser feito apartir de inicioX
altura - A altura do recorte que ser feito apartir de inicioY
destinoX - A posio no eixo X para se desenhar o recorte feito
destinoY - A posio no eixo Y para se desenhar o recorte feito
larguraFinal - A largura que o recorte ter ao ser desenhado
alturaFinal - A altura que o recorte ter ao ser desenhado
Para se redimensionar uma imagem inteira, no apenas um recorte dela, basta que o
inicioX e inicioY sejam 0, a largura e altura correspondam as da prpria imagem e o novo
tamanho desejado seja passado em larguraFinal e alturaFinal.

www.iLearn.com.br

Curso de HTML5 Canvas .Pg | 40

Curso de HTML5
Educao e Informtica

iLearn

Para se recortar sem redimensionar basta que a largura do recorte seja igual
alarguraFinal e a altura igual a alturaFinal.
Se no exemplo de cdigo anterior quisssemos que nossa imagem fosse desenhada com
as dimenses 400x400 alteraramos nossa funo ImagemCarregada() para o seguinte:
function imagemCarregada(ctx, img) {
ctx.drawImage(img, 300, 10, 400, 400);
}
Para recortar e desenhar um quadrado de 100x100 pixels do canto superior esquerdo de
nossa imagem:
function imagemCarregada(ctx, img) {
ctx.drawImage(img, 0, 0, 100, 100, 10, 300, 100, 100);
}
Veja o exemplo em ex30-image.html

Sprites
Uma preocupao quando utilizamos canvas para jogos, por exemplo, quando utilizamos
muitas imagens, como otimizar a carga das mesmas. Dependendo do jogo que
desenvolver, poder utilizar mais de 1000 imagens, imagine o trafego destas imagens
todo o tempo enquando o usurio joga. Se voc estiver jogando localmente, no
perceber muito isto, mas se estiver usando imagens de um servidor na internet, poder
esperar bastante at que uma imagem aparea, sem contar a quantidade de transaes
HTTP que ser utilizado. Uma maneira de contar esta situao a utilizao de Sprite, ou
seja, utilizar todas as imagens em um nico arquivo de imagem. Para exibir uma imagem,
podemos calcular o deslocamento de uma imagem e recortar apenas um pedao por meio
do mtodo drawImage() que aprendemos no tpico anteior.
Veja no exemplo a seguir como podemos trabalhar facilmente com sprite.
ctx.drawImage (img, sprite.width*(imageNumber), 0, sprite.width,
sprite.height, x, y, sprite.width, sprite.height);
Veja o exemplo em ex30-image1.html

www.iLearn.com.br

Curso de HTML5 Canvas .Pg | 41

Curso de HTML5
Educao e Informtica

iLearn

Utilizando udios
Audio
Usando o elemento audio do HTML5 uma nova maneira de incorporar arquivos de
udios em uma pgina Web. Antes do HTML5, a nica maneira de integrar udio em
pginas na Web integrando plugins como o Flash. O elemento de idio podem ser
criados por meio do mtodo document.createElement(image) ou pelo construtor
Image. Veja o exemplo abaixo:
// Cria um novo objeto Audio
sound = new Audio();
// Seleciona o audio
//sound.src = "_recursos/audio/music.ogg";
sound.src = "_recursos/audio/music.mp3";
// Inicia o audio
sound.play();
Veja o exemplo em ex31-audio.html

A utilizao do elemento audio muito fcil, alm do mtodo play() utilizado no exempli
anteior, existem outros que poder ser utilizado na manipulao do jogos.

pause(): mtodo utilizado para pausar o udio;

volume: atributo que recebe um valor entre 0 e 1 para diminuir ou aumentar o
volume;
preload(): mtodo utilizado para especificar se um udio deve ser pr-carregado
ou no;
autoplay(): mtodo que especifica se deve tocar ou no quando o objeto for
carregado;
loop(): mtodo que especifica se repetir o udio quando terminar.

Note que na tabela a seguir, extrada do site CaniUse (caniuse.com), que o elemento
audio suportado pela maioria dos navegarores, inclusive aqueles que so rodades e
dispositivos mveis.

www.iLearn.com.br

Curso de HTML5 Canvas .Pg | 42

Curso de HTML5
Educao e Informtica

iLearn

Atualmente, existem trs formatos de arquivos mais populares suportados pelos

navegadores:

MP3: MPEG Audio Layer 3;

WAV: Waveform Audio;
OGG: Ogg Vorbis.

Devemos estar cientes que nem todos os navegadores suportam todos os arquivos
mencionados. Firefox, por exemplo, passou a suportar MP3 apenas na verso 21 ou
superior. A tabela a seguir mostra os formatos suportados pela maioria dos navegadores:
Browser
Internet Explorer
Firefox
Chrome
Safari
Opera

MP3
9+
21+
Sim
3.1+
14+

WAV
No
3.5+
Sim
3.1+
11.00+

OGG
No
3.5+
9+
Sim
10.50
+

Para que no ocorram problemas referentes a suporte de arquivos de udio, detectar se o

navegador suporta ou no um determinado formato um caminho inteligente. O objeto
Audio nos fornece um mtodo chamado canPlayType() que retorna valores como: ,
maybe ou probably indicado para cada codec. Podemos us-lo para criar uma
verificao simples e carrega o formato de udio adequado, como mostro no exemplo a
seguir:
function getAudioExt() {
var audio = new Audio();
if (!audio.canPlayType) {
www.iLearn.com.br

Curso de HTML5 Canvas .Pg | 43

Curso de HTML5
Educao e Informtica

iLearn

return undefined;
}
if (audio.canPlayType('audio/mpeg') != "") {
return '.mp3';
}
if (audio.canPlayType('audio/ogg;codecs="vorbis"')!=""){
return '.ogg';
}
return undefined;
}
var audioExt = getAudioExt();
if (audioExt) {
// Cria um novo objeto Audio
sound = new Audio();
// Seleciona o audio
sound.src = "_recursos/audio/music"+audioExt;
// Inicia o audio
sound.play();
}
Veja o exemplo em ex32-audio.html

Construindo Animaes em Canvas

Conceitos
Aps desenhar algo no canvas no possivel modifica-lo, est l pra ficar, portanto, para
se fazer animaes necessrio apagar um objeto desenhado e redesenha-lo com as
devidas modificaes aplicadas, como vrios objetos podem ser desenhados no canvas
ao mesmo tempo, no possivel garantir que ao apagar um elemento os outros
continuem intactos pois ocupam o mesmo espao no canvas, no esto separados. Ento
em uma animao necessrio apagar todos os elementos do canvas e redesenh-los
mesmo que apenas um deles sofra alguma modificao em sua posio ou forma.
Esse processo de apagar e redesenhar so feitas vrias vezes por segundo para garantir
uma sensao de movimento mais realista. Na maioria dos casos a funo que
www.iLearn.com.br

Curso de HTML5 Canvas .Pg | 44

Curso de HTML5
Educao e Informtica

iLearn

desenha/redesenha esta separada da funo de animao (que atualiza a posio das

entidades). Veja o exemplo a seguir:
function animationLoop(){
// 1. Percorre por todas as entidades
// 2. Altera suas posies
}
function drawingLoop(){
// 1. Limpa o canvas
// 2. Percorre por todas as entidades
// 3. Desenha todas as entidades
}

setInterval() e setTimeout()
Para se executar o mtodo drawingLoop() repetidas vezes em intervalos regulares no
JavaScript de uma forma bem simples usar um dos dois mtodos temporizadores:
setInterval() ou setTimeout(). O setInterval(function, milliseconds) dis ao navegador
chamar repetidas vezes em intervalos fixos atpe que o mtodo clearInterval() seja
chamado.
Veja no exemplo a seguir como utilizamos o mtodo setInterval():
// Chama o drawingLoop() a cada 20 milsimos de segundos
var gameLoop = setInterval(drawingLoop, 20);
// Para de chamar o drawingLoop() e limpa a varivel gameLoop
clearInterval(gameLoop);
No prximo exemplo, utilizamos o mtodo setTimeout():
function drawingLoop(){
// 1. Limpa o canvas
// 2. Percorre por todas as entidades
// 3. Desenha todas as entidades
// 4. Chama o drawingLoop() a cada 20 milsimos de
//
segundos
var gameLoop = setTimeout(drawingLoop,20);
}
Quando quisermos parar a animao, podemos usar o mtodo clearTimeout():
www.iLearn.com.br

Curso de HTML5 Canvas .Pg | 45

Curso de HTML5
Educao e Informtica

iLearn

// Para de chamar o drawingLoop() e limpa a varivel gameLoop

clearTimeout(gameLoop);

requestAnimationFrame
Enquanto estiver usando setInterval() ou setTimeout() como forma de animar quadros, os
navegadores j vem trabalhando com uma nova API especificamente para tratamentos de
animaes. Existem algumas vantagens da utilizao desta nova API ao invs do
setInterval(), dentre elas so:

Utiliza o cdigo de animao em um nico ciclo de reflow-and-repaint, resultando

em animaes mais suveis;

Interrompe a animao quando a janela no est visvel, utilizando menos CPU;
Limita automaticamente a taxa de quadros por segundo em mquinas com pouco
recurso de processamento.

Fabricantes de navegadores possuem seus prprios mtodos nesta API, como por
exemplo: Microsoft possui o mtodo msRequestAnimationFrame() e o Firefox possui o
mtodo mozRequestAnimationFrame(). No entanto, criamos um polyfill cross-browser
para fornecer estes mtodos em um nico nome: requestAnimationFrame() e
cancelAnimationFrame().
(function() {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for(var x = 0; x < vendors.length &&
!window.requestAnimationFrame; ++x) {
window.requestAnimationFrame =
window[vendors[x] + 'RequestAnimationFrame'];
window.cancelAnimationFrame =
window[vendors[x] + 'CancelAnimationFrame'] ||
window[vendors[x] + 'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = function(callback,
element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16
(currTime - lastTime));
var id = window.setTimeout(function() {
www.iLearn.com.br

Curso de HTML5 Canvas .Pg | 46

Curso de HTML5
Educao e Informtica

iLearn

callback(currTime + timeToCall);
}, timeToCall);
lastTime = currTime + timeToCall;
return id;
};
}
if (!window.cancelAnimationFrame) {
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}
}());
Veja no exemplo a seguir como utilizamos o mtodo requestAnimationFrame() como
forma de substituio dos mtodos setInterval() e setTimeout():
function drawingLoop(nowTime){
// 1. Limpa o canvas
// 2. Percorre por todas as entidades
// 3. Opcionalmente, poder utilizar primeiro nowTime e
//
o ltimo para identificar o frames por segundo
// 4. Desenha todas as entidades
// 5. Chama o drawingLoop() de acordo com a capacidade
//
de processamento da mquina
var gameLoop = requestAnimationFrame(drawingLoop);
}
Quando quisermos parar a animao, podemos usar o mtodo clearAnimationFrame():
// Para de chamar o drawingLoop() e limpa a varivel gameLoop
cancelAnimationFrame(gameLoop);

Limpando o canvas
Antes de redesenhar qualquer coisa precisamos limpar o canvas, para isso vamos
simplesmente desenhar um quadrado branco encima de tudo.

ctx.fillStyle = #fff;
ctx.fillRect(0, 0, canvas.width, canvas.height);
www.iLearn.com.br

Curso de HTML5 Canvas .Pg | 47

Curso de HTML5
Educao e Informtica

iLearn

Ou usar como atalho o mtodo clearRect(), que faz exatamente o mesmo

ctx.clearRect(0, 0, canvas.width, canvas.height);

Animao bsica
Vamos agora animar um pequeno quadrado, ele ser desenhado no canto superior
esquerdo do canvas e sua posio no eixo X ser modificada varias vezes at atingirmos
uma outra posio desejada.
var X_Atual = 0; // define a posio atual no eixo X
var Y_Atual = 0;
var X_Alvo = 200; // define a posioo final no eixo X
function redesenhar(nowTime) {
// Limpa o canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Desenha todas as entidades
ctx.fillStyle = "#000";
// ctx.fillRect(X_Atual, Y_Atual, 100, 100);
ctx.fillRect(X_Atual, 0, 100, 100);
// Atualizar posio X do quadrado at que atinja o
// objetivo
if(X_Atual < X_Alvo) {
X_Atual++;
//Y_Atual++;
requestAnimationFrame(redesenhar);
}

}
requestAnimationFrame(redesenhar);
Veja o exemplo em ex33-animate.html

www.iLearn.com.br

Curso de HTML5 Canvas .Pg | 48