HTML5:

Canvas
Un lienzo en la
Web
Miguel Angel Cumpa Ascua
Objetivo
3D, Graphics
& Effects
Objetivo de la sesin

Presentar y describir las caractersticas de

canvas

Citar los antecedentes que derivaron su creacin

El efecto que tiene sobre otros estndares

Demostrar su uso a travs de cdigo para una

aplicacin
Antecedentes
3D, Graphics
& Effects
Imgenes Canvas

Para mostrar grficos en la web utilizamos

imgenes en formatos !"# P$# %P

Canvas no slo nos permite generar grficos

sino podemos utilizar imgenes pree&istentes
!"# Canvas

'( es un estndar# mientras que Canvas es

una nueva etiqueta )*+,

'( est basado en -+, mientras que

Canvas es creado mediante
.canvas/.0canvas/ y su contenido es
completado con %avascript
Canvas
3D, Graphics
& Effects
Canvas

Etiqueta o elemento en )*+,1 que permite la

generacin de grficos en forma dinmica por
medio de programacin dentro de una pgina2

Posee dos atributos widt3 4anc3o5 y 3eig3t 4alto5# el

tama6o por defecto es 7182

Permite generar grficos 9D# :uegos# animaciones y

composicin de imgenes

'( es otra etiqueta que cumple con funciones

similares
$% &% '%
Canvas
3D, Graphics
& Effects
$% &% '% Canvas

;ntes de que podamos empezar a dibu:ar#

tenemos que 3ablar de la grilla de lienzo o
espacio de coordenadas

$ormalmente una unidad corresponde a 7p& en

canvas

El origen de la grilla esta en la esquina superior

izquierda 4coordenada48#855
$% &% '% Canvas

Nota: Podemos cambiar el origen a una

posicin diferente# gire la red e incluso la
escala2
$% &% '% Canvas
Definir la etiqueta

.canvas id<=tutorial= widt3<=718=

3eig3t<=718=/.0canvas/
$% &% '% Canvas
Verificar si el navegador soporta canvas

var canvas <

document2getElement>y!d4?tutorial?5@
if 4canvas2getConte&t5A
var ct& < canvas2getConte&t4?9d?5@
00 dibu:a con tB cdigo aqu
C else A
alert4D'u navegador no soporta canvas EFG5@
C
(o)mas
*sicas
3D, Graphics
& Effects
(o)mas *sicas
Definir relleno

fillStyle < =rgb4988#8#85=@

Define el color de relleno

var ct& < canvas2getContext4=9d=5@

ct&2fillStyle < =rgb4988#8#85=@
(o)mas *sicas
Dibujar formas bsicas

fillRect4&#y#widt3#3eig3t5 E Dibu:a un rectngulo

con relleno

stroeRect4&#y#widt3#3eig3t5 E Dibu:a un
contorno rectangular

clearRect4&#y#widt3#3eig3t5 E >orra el rea

especificada y 3ace que sea totalmente
transparente
(o)mas *sicas
!jemplo

function draw45A
var canvas < document2getElement>y!d4?tutorial?5@
if 4canvas2getConte&t5A
var ct& < canvas2getContext4?9d?5@
ct&2fillRect491#91#788#7885@
ct&2clearRect4H1#H1#I8#I85@
ct&2stroeRect418#18#18#185@
C
C
(o)mas *sicas
Dibujar lineas

!nternamente# las rutas se almacenan como una lista

de subJrutas 4lneas# arcos# etc5 que en con:unto
forman una forma

"egin#at$%& E ,a lista se pone a cero y podemos

empezar a dibu:ar nuevas formas

Close#at$%& E !ntenta cerrar la forma al trazar una

lnea recta desde el punto actual al principio2 'i la
forma ya se 3a cerrado o no 3ay un solo punto en la
lista esta funcin no 3ace nada2
(o)mas *sicas

Stroe%& E 'e utiliza para dibu:ar una forma con

contorno

'ill%& E 'e utiliza para pintar una forma slida

NotaE ;l llamar al mtodo "ill%&# las formas

abiertas se cerrarn automticamente y no es
necesario utilizar el mtodo Close#at$%&
(o)mas *sicas
Coordenadas del pincel

(ove)o%x* y&E Equivale a levantar el pincel de

un punto y colocarlo en el siguiente2
,a funcin move*o toma dos argumentos# x e
y# que son las coordenadas del nuevo punto de
partida2
(o)mas *sicas
+ineas

line)o%x* y& E Es un mtodo que nos permitir

dibu:ar una linea recta2
Este mtodo toma dos argumentos x e y# que
son las coordenadas del punto final de la lnea2
El punto de partida depende de los trazados
anteriores# donde el punto final de la ruta
anterior es el punto de partida para la siguiente#
etc2 El punto de partida tambin se puede
cambiar mediante el mtodo move*o452
(o)mas *sicas
,rcos

arc%x* y* radius* start,ngle* end,ngle* anticloc-ise&E

Dibu:a arcos o circulos2
,a x e y son las coordenadas del centro del crculo2 radius
se e&plica por s mismo2 El start,ngle y end,ngle definen
los puntos inicial y final del arco en radianes2 El ngulo de
inicio y cierre se miden desde el e:e &2 El anticloc-ise es
un valor booleano que cuando es true se6ala a la izquierda
del arco# de lo contrario en el sentido de las agu:as del relo:2

Nota: ,os ngulos en la funcin arc se miden en radianes#

no en grados2 Para convertir grados a radianes se puede
utilizar la siguiente e&presin %ava'criptE var < radianes
4+at32P!07K85 L grados2
(o)mas *sicas
Rectngulos

rect%x* y* -idt$* $eig$t&: Es un mtodo que

agrega un camino rectangulo con la lista de
rutas2 Es un metodo mas directo para crear
rectangulos2
Este mtodo toma cuatro argumentos2 ,os
parmetros x e y definir las coordenadas de la
esquina superior izquierda de la trayectoria
rectangular nueva2 -idt$ y $eig$t definir la
anc3ura y la altura del rectngulo2
(o)mas *sicas
Curvas "./ier y Cuadrticas

quadraticCurve)o%cp0x* cp0y* x* y&

be/ierCurve)o%cp0x* cp0y* cp1x* cp1y* x* y&

,os parmetros x e y en estos dos mtodos

son las coordenadas del punto final2 cp1x y
cp1y son las coordenadas del primer punto de
control# y cp2x y cp2y son las coordenadas del
segundo punto de control2
(o)mas *sicas

Mna curva cuadrtica de >zier tiene un inicio y

un punto final 4puntos azules5 y un solo punto
de control 4punto ro:o5# mientras que una curva
cBbica de >zier se utilizan dos puntos de
control2
(o)mas *sicas
!jemplo 2 +ine)o

ct&2beginPat345@
ct&2move*o4N1#185@
ct&2line*o4788#N15@
ct&2line*o4788#915@
ct&2fill45@
(o)mas *sicas
!jemplo 2 ,rc

ct&2beginPat345@
ct&2arc4N1#N1#18#8#+at32P!L9#true5@
ct&2move*o4778#N15@
ct&2arc4N1#N1#O1#8#+at32P!#false5@
ct&2move*o4I1#I15@
ct&2arc4I8#I1#1#8#+at32P!L9#true5@
ct&2move*o4P1#I15@
ct&2arc4P8#I1#1#8#+at32P!L9#true5@
ct&2stroQe45@
(o)mas *sicas
!jemplo 2 3uadraticCurve)o

ct&2beginPat345@
ct&2move*o4N1#915@
ct&2quadraticCurve*o491#91#91#I9215@
ct&2quadraticCurve*o491#788#18#7885@
ct&2quadraticCurve*o418#798#O8#7915@
ct&2quadraticCurve*o4I8#798#I1#7885@
ct&2quadraticCurve*o4791#788#791#I9215@
ct&2quadraticCurve*o4791#91#N1#915@
ct&2stroQe45@
(o)mas *sicas
!jemplo 2 "e/ierCurve)o

ct&2beginPat345@
ct&2move*o4N1#H85@
ct&2bezierCurve*o4N1#ON#N8#91#18#915@
ct&2bezierCurve*o498#91#98#I921#98#I9215@
ct&2bezierCurve*o498#K8#H8#789#N1#7985@
ct&2bezierCurve*o4778#789#7O8#K8#7O8#I9215@
ct&2bezierCurve*o47O8#I921#7O8#91#788#915@
ct&2bezierCurve*o4K1#91#N1#ON#N1#H85@
ct&2fill45@
Imgenes
3D, Graphics
& Effects
Imgenes

Mtiliza las imgenes como fondo o como una

foto de composicin dinmica

,as imgenes e&ternas se pueden utilizar en

cualquier en formato P$# !" o %PE
Imgenes
4mportando imgenes

Referenciar al %ava'cript !mage ob:ect u otro

elemento Canvas como recurso2 $o es posible
utilizar las imgenes con slo proporcionar una
MR, o ruta de acceso a ellos2

Dibu:amos la imagen usando la funcin

drawImage
Imgenes
5sando imgenes de la misma pgina

document.images: accedemos a todas las

imgenes de la pagina

document.getElementsByTagName:
accedemos a las imgenes mediante el tag

document6get!lement"y4d: si conocemos el
!D de la imagen
Imgenes
5sando otros elementos Canvas

;s como usamos a otras imgenes# usando el

mtodo document2getElements>y*ag$ame el
mtodo document2getElement>y!d

Mna de las prcticas mas Btiles es utilizar un

canvas como vista previa de uno mas grande
Imgenes
4mage 7bject

var img < new !mage45@ 00 crea el ob:eto !mage

img2onload < function45A
00 Dibu:a con tu codigo aqu
C
img2src < ?my!mage2png?@ 00 ruta de la imagen o
recurso
Imgenes
!mbebiendo una imagen via data: 5R+

Podemos incluir imgenes via data E MR,

,a imagen se define en una cadena de

encoded >aseIH

(enta:aE el resultado de la imagen esta

disponible sin otra peticin al servidor

Desventa:asE las imgenes no son cac3eadas y

que mientras ms pesada sea la imagen ms
larga ser la cadena de definicin
Imgenes
!jemplo

var imgSsrc <

?dataEimage0gif@baseIH#R8lFDl3Cw;,;!;;;;
;;Opn0Ti)1>;E;;;E;,;;;;;;,;;s;;;!M
3;U3QcuFHlm$(indoNqyr!-i>V;Fw<<?@
Imgenes
Dibujar 4mgenes

dra-4mage%image* x* y& E Dibu:a el recurso en

el canvas

Image es la referencia a nuestra imagen u

ob:eto canvas# x e y son las coordenadas
donde nuestra imagen sera colocada

El mtodo drawImage esta sobrecargado y

tiene tres variantes
Imgenes
!jemplo

function draw45 A
var ct& <
document2getElement>y!d4?canvas?52getConte&t4?9d?5@
var img < new !mage45@
img2onload < function45A
ct&2draw!mage4img#8#85@
ct&2beginPat345@
ct&2move*o4O8#PI5@
ct&2line*o4N8#II5@
ct&2line*o478O#NI5@
ct&2line*o47N8#715@
ct&2stroQe45@
C
img2src < ?images0bacQdrop2png?@
C
Imgenes
!scalando

dra-4mage%image* x* y* -idt$* $eig$t&E Escala

la imgen de acuerdo al anc3o y alto dado

width y height son los tama6os de la imagen

en el canvas
Imgenes
!jemplo

function draw45 A
var ct& <
document2getElement>y!d4?canvas?52getConte&t4?9d?5@
var img < new !mage45@
img2onload < function45A
for 4var i<8@i.H@iUU5A
for 4var :<8@:.O@:UU5A
ct&2draw!mage4img#:L18#iLOK#18#OK5@
C
C
C
img2src < ?images0r3ino2:pg?@
C
Imgenes
Rebanando

dra-4mage%image* sx* sy* s8idt$* s9eig$t* dx* dy*

d8idt$* d9eig$t&

image es o bien una referencia a un ob:eto de imagen o

una referencia a otro canvas2 Para los otros oc3o
parmetros observar la imagen de la derec3a2
,os primeros cuatro parmetros definen ubicacin y
tama6o de la porcin de la imagen de
origen2 ,os Bltimos cuatro parmetros
definen la posicin y tama6o en
el lienzo de destino2
Imgenes
!jemplo

function draw45 A
var canvas < document2getElement>y!d4?canvas?5@
var ct& < canvas2getConte&t4?9d?5@
00 Draw slice
ct&2draw!mage4document2getElement>y!d4?source?5#
OO#N7#78H#79H#97#98#KN#78H5@
00 Draw frame
ct&2draw!mage4document2getElement>y!d4?frame?5#8#85@
C
Colo)
3D, Graphics
& Effects
Colo)

StroeStyle: se utiliza para fi:ar el color del

contorno de la forma

'illStyle: es para fi:ar el color de relleno

De forma predeterminada# el contorno y color

de relleno que se establece es negro 4color
R> 3e&adecimal W88888852
Colo)

,as valores vlido que puede introducir# de

acuerdo a la especificacin# deben ser valores
de color C''O2 Cada uno de los e:emplos
siguientes describen el mismo color2

00 colorE naran:a
ct&2fill'tyle < =orange=@
ct&2fill'tyle < =W"";188=@
ct&2fill'tyle < =rgb4911#7I1#85=@
ct&2fill'tyle < =rgba4911#7I1#8#75=@
Colo)

Nota 0: En la actualidad no todos los C'' O

valores de color son compatibles con el motor
ecQo2 Por e:emplo# los valores de color )',
4788X# 91X# 85 o R> 48#788X# 85 no estn
permitidos2 'i nos atenemos a los de arriba# no
3abr algBn problema2
Colo)

Nota 1: 'i establece stroeStyle o fillStyle# el

nuevo valor se convierte en el valor
predeterminado para todas las formas2 Para
cada forma que desee en un color diferente#
tendr que volver a asignar la propiedad
fill'tyle o stroQe'tyle2
Colo)
!jemplo 2 fillStyle

function draw45 A
var ct& < document2getElement>y!d4?canvas?5
2getConte&t4?9d?5@
for 4var i<8@i.I@iUU5A
for 4var :<8@:.I@:UU5A
ct&2fill'tyle < ?rgb4? U +at32floor4911JH921Li5 U ?#? U
+at32floor4911JH921L:5 U ?#85?@
ct&2fillRect4:L91#iL91#91#915@
C
C
C
Colo)
!jemplo 2 stroeStyle

function draw45 A
var ct& < document
2getElement>y!d4?canvas?52getConte&t4?9d?5@
for 4var i<8@i.I@iUU5A
for 4var :<8@:.I@:UU5A
ct&2stroQe'tyle < ?rgb48#? U +at32floor4911JH921Li5
U ?#? U+at32floor4911JH921L:5 U ?5?@
ct&2beginPat345@
ct&2arc47921U:L91#7921UiL91#78#8#+at32P!L9#true5@
ct&2stroQe45@
C
C
C
Colo)
)ransparencia

Esto se 3ace mediante el establecimiento de la

propiedad global,lp$a# o podemos asignar un
color semiJtransparente a 'troQe'tyle o
"ill'tyle

global,lp$a < transparency value

Colo)

Esta propiedad aplica un valor de transparencia

a todas las formas dibu:adas en el canvas2 El
rango vlido de valores es de 828 4totalmente
transparente5 a 728 4totalmente opaco52 De
forma predeterminada# esta propiedad se
establece en 7282

,a propiedad global,lp$a puede ser Btil si

desea dibu:ar varias formas en el lienzo con la
transparencia similar2
Colo)

El stroeStyle y fillStyle aceptan valores de

color C'' O# por ello# podemos utilizar# la
funcin rgba %& es similar a la rgb %& pero que
tiene un parmetro adicional que establece el
valor de transparencia de este color en
particular2 El rango vlido es de nuevo entre 8#8
4totalmente transparente5 y 728 4totalmente
opaco52

ctx6fillStyle : ;rgba%1<<*0=<*>*0.5&;?
Colo)
!jemplo 2 global,lp$a

function draw45 A
var ct& < document2getElement>y!d4?canvas?52getConte&t4?9d?5@
00 dibu:o el fondo
ct&2fill'tyle < ?W"D8?@
ct&2fillRect48#8#N1#N15@
ct&2fill'tyle < ?WIC8?@
ct&2fillRect4N1#8#N1#N15@
ct&2fill'tyle < ?W8P"5?@
ct&2fillRect48#N1#N1#N15@
ct&2fill'tyle < ?W"O8?@
ct&2fillRect4N1#N1#718#7185@
ct&2fill'tyle < ?W"""?@
00 fi:o el valor de la transparencia
ct&2global;lp3a < 829@
00 dibu:o circulos semitransparentes
for 4i<8@i.N@iUU5A
ct&2beginPat345@
ct&2arc4N1#N1#78U78Li#8#+at32P!L9#true5@
ct&2fill45@
C
C
Colo)
!jemplo 2 fillRect

function draw45 A
var ct& < document2getElement>y!d4?canvas?52getConte&t4?9d?5@
00 Draw bacQground
ct&2fill'tyle < ?rgb4911#997#85?@
ct&2fillRect48#8#718#ON215@
ct&2fill'tyle < ?rgb4789#98H#85?@
ct&2fillRect48#ON21#718#ON215@
ct&2fill'tyle < ?rgb48#71O#9115?@
ct&2fillRect48#N1#718#ON215@
ct&2fill'tyle < ?rgb4911#17#85?@
ct&2fillRect48#77921#718#ON215@
00 Draw semi transparent rectangles
for 4var i<8@i.78@iUU5A
ct&2fill'tyle < ?rgba4911#911#911#?U4iU75078U?5?@
for 4var :<8@:.H@:UU5A
ct&2fillRect41UiL7H#1U:LON21#7H#9N215
C
C
C
Colo)
!stilos de lineas

lineYidt3 < value

lineCap < type
line%oin < type
miter,imit < value
Colo)
+ine8idt$

Esta propiedad establece el grosor de la lnea

actual2 ,os valores deben ser nBmeros
positivos2 Por defecto# este valor se establece
en 7#8 unidades2
Colo)
!jemplo 2 line8idt$

function draw45 A
var ct&<
document2getElement>y!d4?canvas?52getConte&t4?9d?5@
for 4var i < 8@ i . 78@ iUU5A
ct&2lineYidt3 < 7Ui@
ct&2beginPat345@
ct&2move*o41UiL7H#15@
ct&2line*o41UiL7H#7H85@
ct&2stroQe45@
C
C
Colo)
lineCap

,a propiedad lineCap determina los puntos

e&tremos2 )ay tres posibles valores para esta
propiedadE butt# round y square2

ct&2lineCap < valor@

Colo)
!jemplo 2 lineCap
function draw45 A
var ct& < document2getElement>y!d4?canvas?52getConte&t4?9d?5@
var lineCap < Z?butt?#?round?#?square?[@
00 dibu:a guias
ct&2stroQe'tyle < ?W8Pf?@
ct&2beginPat345@
ct&2move*o478#785@
ct&2line*o47H8#785@
ct&2move*o478#7H85@
ct&2line*o47H8#7H85@
ct&2stroQe45@
00 dibu:a lineas
ct&2stroQe'tyle < ?blacQ?@
for 4var i<8@i.lineCap2lengt3@iUU5A
ct&2lineYidt3 < 71@
ct&2lineCap < lineCapZi[@
ct&2beginPat345@
ct&2move*o491UiL18#785@
ct&2line*o491UiL18#7H85@
ct&2stroQe45@
C
C
Colo)
line@oin

,a propiedad line@oin determina cmo dos

lneas que conectan en forma se unen entre s2
)ay tres posibles valores para esta propiedadE
round# bevel y miter2 Por defecto esta
propiedad se establece en miter2
Colo)
!jemplo 2 line@oin

function draw45 A
var ct& <
document2getElement>y!d4?canvas?52getConte&t4?9d?5@
var line%oin < Z?round?#?bevel?#?miter?[@
ct&2lineYidt3 < 78@
for 4var i<8@i.line%oin2lengt3@iUU5A
ct&2line%oin < line%oinZi[@
ct&2beginPat345@
ct&2move*o4J1#1UiLH85@
ct&2line*o4O1#H1UiLH85@
ct&2line*o4N1#1UiLH85@
ct&2line*o4771#H1UiLH85@
ct&2line*o4711#1UiLH85@
ct&2stroQe45@
C
C
Colo)
(iter+imit

,a propiedad miter+imit determina 3asta qu

punto el punto de cone&in e&terior puede ser
realizada desde el punto de cone&in en el
interior2 'i dos lneas superan este valor se
elaborar una unin biselada2
Colo)
Degradados

Creamos un ob:eto canvasAradient mediante

uno de los mtodos siguientes2 Mtilizamos este
ob:eto para asignar a las propiedades fill'tyle o
stroQe'tyle2
Colo)
Create+inearAradient%x0*y0*x1*y1&

El mtodo create+inearAradient toma cuatro

argumentos que representan el punto de
partida %x0* y0& y el punto final %x1* y1& del
gradiente2
Colo)
CreateRadialAradient%x0*y0*r0*x1*y1*r1&

El mtodo createRadialradient lleva seis

argumentos2 ,os tres primeros argumentos
definir un crculo con las coordenadas %x0* y0&
y radio r0 y el segundo# un crculo con las
coordenadas %x1* y1& y el radio r12
Colo)
,ddColorStop%position* color&

Este mtodo toma dos argumentos2 ,a

posicin debe ser un nBmero entre 828 y 728 y
define la posicin relativa de los colores en el
degradado2 El argumento de color debe ser
una cadena que representa un color C'' 4es
decir# W """# rgba 48#8#8#75# etc25
Colo)
!jemplo 2 create+inearAradient

function draw45 A
var ct& < document2getElement>y!d4?canvas?52getConte&t4?9d?5@
00 crea el degradado
var lingrad < ct&2create,inearradient48#8#8#7185@
lingrad2addColor'top48# ?W88;>E>?5@
lingrad2addColor'top4821# ?Wfff?5@
lingrad2addColor'top4821# ?W9IC888?5@
lingrad2addColor'top47# ?Wfff?5@
var lingrad9 < ct&2create,inearradient48#18#8#P15@
lingrad92addColor'top4821# ?W888?5@
lingrad92addColor'top47# ?rgba48#8#8#85?5@
00 asigna el degradado al stroQe'tyle y fill'tyle
ct&2fill'tyle < lingrad@
ct&2stroQe'tyle < lingrad9@
00 draw s3apes
ct&2fillRect478#78#7O8#7O85@
ct&2stroQeRect418#18#18#185@
C
Colo)
!jemplo 2 createRadialAradient

function draw45 A
var ct& < document2getElement>y!d4?canvas?52getConte&t4?9d?5@
00 crea el degradado
var radgrad < ct&2createRadialradient4H1#H1#78#19#18#O85@
radgrad2addColor'top48# ?W;NDO8C?5@
radgrad2addColor'top482P# ?W87P"I9?5@
radgrad2addColor'top47# ?rgba47#71P#PK#85?5@
var radgrad9 < ct&2createRadialradient4781#781#98#779#798#185@
radgrad92addColor'top48# ?W""1"PK?5@
radgrad92addColor'top482N1# ?W""87KK?5@
radgrad92addColor'top47# ?rgba4911#7#7OI#85?5@
var radgradO < ct&2createRadialradient4P1#71#71#789#98#H85@
Colo)
!jemplo 2 createRadialAradient

radgradO2addColor'top48# ?W88CP""?5@
radgradO2addColor'top482K# ?W88>1E9?5@
radgradO2addColor'top47# ?rgba48#987#911#85?5@
var radgradH < ct&2createRadialradient48#718#18#8#7H8#P85@
radgradH2addColor'top48# ?W"H"987?5@
radgradH2addColor'top482K# ?WEHCN88?5@
radgradH2addColor'top47# ?rgba499K#7PP#8#85?5@
00 dibu:a formas
ct&2fill'tyle < radgradH@
ct&2fillRect48#8#718#7185@
ct&2fill'tyle < radgradO@
ct&2fillRect48#8#718#7185@
ct&2fill'tyle < radgrad9@
ct&2fillRect48#8#718#7185@
ct&2fill'tyle < radgrad@
ct&2fillRect48#8#718#7185@
C
Colo)
#atrones

Create#attern%image*type&

Este mtodo toma dos argumentos2 ,a imagen

es una referencia a un ob:eto imagen o un
elemento de canvas diferente2 ,a letra deber
ser una cadena que contiene uno de los
siguientes valoresE repeat# repeatJ&#repeatJy y
noJrepeat2
Colo)

Mna vez que 3emos creado un modelo# lo

podemos asignar a las propiedades fill'tyle o
stroQe'tyle2

NotaE ; diferencia del mtodo draw!mage# debe

asegurarse de que la imagen que uso se carga
antes de llamar a este mtodo o el patrn se
puede e&traer correctamente2
Colo)
!jemplo 2 create#attern

function draw45 A
var ct& < document2getElement>y!d4?canvas?52getConte&t4?9d?5@
00 crea un ob:eto image para usarlo en el pattern
var img < new !mage45@
img2src < ?images0wallpaper2png?@
img2onload < function45A
00 crea un pattern
var ptrn < ct&2createPattern4img#?repeat?5@
ct&2fill'tyle < ptrn@
ct&2fillRect48#8#718#7185@
C
C
Colo)
Sombras

s$ado-7ffsetB < float

s$ado-7ffsetC < float

s$ado-"lur < float

s$ado-Color < color

Colo)

s$ado-7ffsetB y s$ado-7ffsetC indican

3asta qu punto la sombra que se e&tienden
desde el ob:eto en las direcciones B e C# estos
valores no se ven afectados por la matriz de
transformacin actual2

Mtilice valores negativos para que la sombra se

amplie 3acia arriba o 3acia la izquierda# y los
valores positivos para que la sombra se
e&tienda 3acia aba:o o 3acia la derec3a2 Estos
son 8 por defecto2
Colo)

s$ado-"lur indica el tama6o del desenfoque#

este valor no se corresponde con un nBmero
de p&eles y no se ve afectada por la
transformacin de la matriz actual2 El valor
predeterminado es 82

S$ado-Color es un color C''# por omisin#

es totalmente negro transparente2
Colo)
!jemplo 2 sombras

function draw45 A
var ct& <
document2getElement>y!d4?canvas?52getConte&t4?9d?5@
ct&2s3adowFffset- < 9@
ct&2s3adowFffsetV < 9@
ct&2s3adow>lur < 9@
ct&2s3adowColor < =rgba48# 8# 8# 8215=@
ct&2font < =98p& *imes $ew Roman=@
ct&2fill'tyle < =>lacQ=@
ct&2fill*e&t4='ample 'tring=# 1# O85@
C
T)ans+o),
maciones
3D, Graphics
& Effects
T)ans+o)maciones
save%& y restore%&

'e utilizan para guardar y recuperar el estado

del canvas2

Puede llamar al mtodo save tantas veces

como quieras2

Cada vez que se llama al mtodo de

restauracin el Bltimo estado guardado se
devuelve de la pila y todos los a:ustes
guardados se restauran2
T)ans+o)maciones

+os estados del canvas se almacenan en una

pila2 Cada vez que el mtodo save se llama el
estado de dibu:o actual se inserta en la pilaE

,as transformaciones que se 3an aplicado2

,os valores de color# transparencia# patron# lineas#

sombras2

,a trayectoria actual de recorte2

T)ans+o)maciones
!jemplo D SaveERestore

function draw45 A
var ct& < document2getElement>y!d4?canvas?52getConte&t4?9d?5@
ct&2fillRect48#8#718#7185@ 00 dibu:a un rectngulo
ct&2save45@ 00 graba el estado por defecto
ct&2fill'tyle < ?W8P"? 00 3acemos cambios
ct&2fillRect471#71#798#7985@ 00 dibu:amos un nuevo rectngulo
ct&2save45@ 00 guardamos el actual estado
ct&2fill'tyle < ?W"""? 00 3acemos cambios
ct&2global;lp3a < 821@
ct&2fillRect4O8#O8#P8#P85@ 00 dibu:amos un rectngulo
ct&2restore45@ 00 restauramos al estado anterior
ct&2fillRect4H1#H1#I8#I85@00 dibu:amos un rectngulo con el estado anterior
ct&2restore45@ 00 restauramos el estado original
ct&2fillRect4I8#I8#O8#O85@ 00 dibu:amos un rectngulo con el estado original
C
T)ans+o)maciones
translate%x* y&

Este mtodo toma dos argumentos2 x es la

cantidad que la canvas se mueve a la
izquierda o a la derec3a# y es la cantidad que
se movi 3acia arriba o 3acia aba:o2
T)ans+o)maciones
!jemplo 2 translate

function draw45 A
var ct& < document2getElement>y!d4?canvas?5
2getConte&t4?9d?5@
ct&2fillRect48#8#O88#O885@
for 4var i<8@i.O@iUU5 A
for 4var :<8@:.O@:UU5 A
ct&2save45@
ct&2stroQe'tyle < =WPC""88=@
ct&2translate418U:L788#18UiL7885@
draw'pirograp34ct&#98L4:U9504:U75#JKL4iUO504iU75#785@
ct&2restore45@
C
C
C
T)ans+o)maciones

function draw'pirograp34ct&#R#r#F5A
var &7 < RJF@
var y7 < 8@
var i < 7@
ct&2beginPat345@
ct&2move*o4&7#y75@
do A
if 4i/988885 breaQ@
var &9 < 4RUr5L+at32cos4iL+at32P!0N95 \
4rUF5L+at32cos444RUr50r5L4iL+at32P!0N955
var y9 < 4RUr5L+at32sin4iL+at32P!0N95 \
4rUF5L+at32sin444RUr50r5L4iL+at32P!0N955
ct&2line*o4&9#y95@
&7 < &9@
y7 < y9@
iUU@
C w3ile 4&9 ]< RJF ^^ y9 ]< 8 5@
ct&2stroQe45@
C
T)ans+o)maciones
rotate%angle&

,ngle es el ngulo de rotacin del canvas2 Mn

giro 3acia la derec3a mide en radianes2

El punto central de rotacin es siempre el

origen del canvas2
T)ans+o)maciones
!jemplo 2 rotate

function draw45 A
var ct& < document2getElement>y!d4?canvas?52getConte&t4?9d?5@
ct&2translate4N1#N15@
for 4var i<7@i.I@iUU5A 00 ,oop t3roug3 rings 4from inside to out5
ct&2save45@
ct&2fill'tyle < ?rgb4?U417Li5U?#?U4911J17Li5U?#9115?@
for 4var :<8@:.iLI@:UU5A 00 draw individual dots
ct&2rotate4+at32P!L904iLI55@
ct&2beginPat345@
ct&2arc48#iL7921#1#8#+at32P!L9#true5@
ct&2fill45@
C
ct&2restore45@
C
C
T)ans+o)maciones
scale%x* y&

Este mtodo toma dos parmetros2 x es el

factor de escala en la direccin 3orizontal e y
es el factor de escala en la direccin vertical2

;mbos parmetros deben ser nBmeros reales#

y no necesariamente positivo2

,os valores menores a 7#8 reducir el tama6o de

la unidad y los valores mayores a 7#8 aumentar
el tama6o de la unidad2
T)ans+o)maciones
!jemplo D scale

2
Com-osicin
3D, Graphics
& Effects
Com-osicin
globalComposite7peration : type

type es una cadena que representa uno de las

doce operaciones de composicin2
Com-osicin
type:

sourceJover 4default5

DestinationJover

sourceJin
Com-osicin
type:

destinationJin

sourceJout

destinationJout
Com-osicin
type:

'ourceJatop

DestinationJatop

lig3ter
Com-osicin
type:

-or

Copy

DarQer 4'in aplicacin5

NotaE En la actualidad el a:uste de Copy no 3ace nada

en los navegadores basados en ecQo 72K2
Com-osicin
!jemplo D globalComposite7peration

2
Com-osicin
Clip%&

Mtilizamos el mtodo de clip para crear un

trazado de recorte nueva2
Com-osicin
!jemplo D clip

2
Animaciones
*sicas
3D, Graphics
& Effects
Animaciones *sicas
#asos bsicos:
72>orrar el canvas
92uardar el estado del canvas
O2Dibu:ar formas animadas
H2Restaurar el estado del canvas
Animaciones *sicas
Controlando una animaciFn

set4nterval%animateS$ape*milisegundos&?

E:ecuta repetidamente el cdigo suministrado

set)imeout%animateS$ape*milisegundos&?

'e e:ecuta una vez despus de la cantidad de

tiempo2

NotaE Estas funciones son recomendadas si no

se desea interaccion con el usuario# de lo
contrario usar los eventos de mouse y teclado2
Animaciones *sicas
!jemplo 2 ,nimaciones "sicas

2
.)eg/ntas
3D, Graphics
& Effects
Canvas
Un lienzo en la
Web
Miguel Angel Cumpa Ascua
miguelmiseck@mozilla.pe
/mozillaperu