Canvas

Canvas
General
Método JavaScript Descripción Defecto
width canvas.width Determina (sets) o devuelve (returns) la anchura del canvas 300
height canvas.height Determina (sets) o devuelve (returns) la altura del canvas 150
Devuelve un objeto que proporciona todos los métodos y

getContext() canvas.getContext("2d");
propiedades para dibujar en el canvas.
Convierte el contenido del canvas en una imágen - data:uri. El

toDataURL() canvas.toDataURL(tipo); image/png
parámetro entre paréntesis indica el tipo de imágen
Colores, estilos, y sombras

context.fillStyle = color | gradiente | Determina o devuelve el color, gradiente o patrón del

fillStyle negro
patrón; relleno.
context.strokeStyle = color | Determina o devuelve el color, gradiente o patrón de la

strokeStyle negro
gradiente | patrón; línea.
Determina (sets) o devuelve (returns) la grosor de la

lineWidth context.lineWidth=numero; 1
línea.
Determina (sets) o devuelve (returns) el color utilizado #000000;

shadowColor context.shadowColor=color;
para las sombras. transparente
Determina (sets) o devuelve (returns) el nivel de

shadowBlur context.shadowBlur=number; 0
desenfoque de las sombras.
Determina (sets) o devuelve (returns) la distancia

shadowOffsetX context.shadowOffsetX=number; horizontal entre la sombra y la forma que la genera. El 0
valor tiene que ser > 0 para que la sombra tenga efecto.

shadowOffsetY context.shadowOffsetY=number; horizontal entre la sombra y la forma que la genera. El 0
Crea un gradiente lineal para

utilizar en el <canvas>
x0,y0 son las coordenadas del
punto donde empieza el
createLinearGradient() context.createLinearGradient(x0,y0,x1,y1);
gradiente.
x1,y1 son las coordenadas del
punto donde acaba el
gradiente.
context.createPattern(img,"repeat | repeat-x | repeat-y Repite una imagen en la

createPattern()
| no-repeat"); dirección especificada.
Crea un gradiente radial para

utilizar en el <canvas>
createRadialGradient() context.createRadialGradient(x0,y0,r0,x1,y1,r1); x e y son las coordenadas del
centro de los circulos
r es el radio de los circulos.
Especifica los colores y la

addColorStop() gradient.addColorStop(stop,color); posición donde para el
gradiente.
Líneas
Propiedad JavaScript Descripción Defecto
lineWidth context.lineWidth=numero; Determina (sets) o devuelve (returns) la grosor de la línea. 1
Determina (sets) o devuelve (returns) el aspecto de las puntas

lineCap context.lineCap="butt|round|square"; butt
de una línea.
Determina (sets) o devuelve (returns) el aspecto de las juntas

lineJoin context.lineJoin="bevel|round|miter"; entre líneas. Posibles valores: bevel (biselado), round mitter
(redondeado), miter (en angulo)
Determina (sets) o devuelve (retursn) el aspecto de las juntas en

miterLimit context.miterLimit=numero; miter. Puede tomar valores entre 1 (punta roma, aspecto 10
biselado) y 5 (punta en angulo).
Rectángulos
rect() context.rect(x,y,anchura,altura); Dibuja un rectángulo desde un punto (x,y).
fillRect() context.fillRect(x,y,anchura,altura); Dibuja y rellena un rectángulo desde un punto (x,y).
strokeRect() context.strokeRect(x,y,anchura,altura); Dibuja un rectángulo desde un punto (x,y).
Borra los píxeles especificados dentro de un rectángulo

clearRect(); context.clearRect(x,y,width,height);
dado.
Trazados
fill() context.fill(); Rellena una forma geométrica. black
stroke() context.stroke(); Dibuja una línea ya definida.

beginPath() context.beginPath(); Inicia un nuevo trazado
Mueve el "lapiz" a un punto en el canvas, especificado por x=0;

moveTo() context.moveTo(x,y);
sus coordenadas "x" e "y". NO DIBUJA ninguna línea. y=0;
closePath() context.closePath(); Cierra una línea poligonal o una línea curva
Define una línea desde un punto especificado anteriormente

lineTo() context.lineTo(x,y); hasta otro punto especificado por sus coordenadas "x" e "y".
Mueve el "lapiz" a este punto.
Recorta una región con la forma y tamaño del trazado

dibujado previamente en el canvas. Cualquier cosa dibujada
clip() context.clip()
después, será visible solo dentro de la región de recorte
( clipping region).
Define una curva cuadráticas de Bézier.

context.quadraticCurveTo( cx,cy = coordenadas punto de anclaje (control point)
quadraticCurveTo()
cx,cy,x,y) ; x,y = coordenadas punto final (el punto de partida siendo
determinado previamente).
Define una curva de Bézier.

cx1,cy1,cx2,cy2= coordenadas puntos de anclaje (control
context.bezierCurveTo(
bezierCurveTo() points)
cx1,cy1,cx2,cy2,x,y );
x,y = coordenadas punto final (el punto de partida siendo
determinado previamente).
Define un segmento circular.

x y = coordenadas centro
r = radio
sA = ángulo de partida en radianes
arc() context.arc( x, y, r, sA, eA, aC )
eA = ángulo final en radianes
aC = sentido contra reloj (anti-Clockwise) true/false
360° = 2Π radianes.
radianes = (Math.Pi / 180) * grados;
arcTo() context.arcTo( x1,y1,x2,y2,r ); Crea un arco de círculo entre dos tangentes x1, y1 y x2, y2
Detecta si un punto cuyas coordenadas son x e y se encuentra

isPointInPath() context.isPointInPath(x,y);
en un trazado dado
Transformations
Reduce o amplía a escala el dibujo actual.

h = horizontal; v = vertical
scale() context.scale(h,v); 1
Valores que pueden tomar los parametros del método: 1=100%,
0.5=50%, 2=200%, etc...
Gira los trazados posteriores un ángulo dado (en radianes). El

rotate() context.rotate(ángulo); punto alrededor del cual gira coincide con el origen del canvas
(0,0)
translate() context.translate(x,y); Mueve el origen (0,0) del <canvas> en un punto dado (x,y).
transform() context.transform(a,b,c,d,e,f); Cambia los trazados posteriores, cambiando la matriz de estos.
Reinicia el canvas a los valores iniciales, antes de proceder a

setTransform() context.setTransform(a,b,c,d,e,f);
cambiar los trazados posteriores.
Text
context.font = "font-style font-variant font-weight

10px sans-
font font-size font-family";
serif
context.font = "italic small-caps bold 12px arial";
context.textAlign="center | end | left | right |

textAlign start
start";
context.textBaseline =
Determina (sets) o devuelve (returns) la
textBaseline "alphabetic | top | hanging | middle | ideographic | alphabetic
alineación vertical del texto.
bottom";
Dibuja texto relleno con un color, gradiente o patrón

fillText() context.fillText(text,x,y,maxWidth); previamente definido. #000;
maxWidth es opcional. No se admite en Safari.
Dibuja texto bordeado con un color, gradiente o patrón

strokeText() context.strokeText(text,x,y,maxWidth); previamente definido. black
maxWidth es opcional.
Devuelve un objeto que contiene la anchura del texto

measureText() context.measureText(text).width;
especificado entre paréntesis.
Image Drawing
drawImage() context.drawImage(img,x,y); Dibuja una imagen en el canvas desde el punto(x,y)
Dibuja una imagen en el canvas desde el punto(x,y),

drawImage() context.drawImage(img,x,y,w,h); donde w y h son el ancho y el alto de la imagen,
respectivamente.
Recorta la imagen empezando desde un punto (sx,

sx), sw y sh siendo el ancho y el alto de la zona
drawImage() context.drawImage(img,sx,sy,sw,sh,x,y,w,h);
recortada.
Dibuja esta imagen en el canvas desde el punto(x,
y), w y h siendo el ancho y el alto de la imagen

resultante.
Pixel Manipulation
width imgData.width Devuelve el ancho del objeto ImageData, en píxeles
height imgData.height Devuelve la altura del objeto ImageData, en píxeles
data imageData.data Devuelve un objeto conteniendo todos los datos del objeto ImageData.
Crea un nuevo objeto ImageData en

createImageData() context.createImageData( ancho, alto ); blanco. Toma dos argumentos: la anchura
y la altura del objeto creado
Crea un nuevo objeto ImageData con las

createImageData() context.createImageData(imgData); mismas dimensiones que el objeto
especificado por el argumanto imgData.
Devuelve un objeto ImageData que copia

getImageData() context.getImageData ( x, y, ancho, alto ); los datos de los píxeles del rectángulo
especificado.
Pone los datos de la imagen (de un objeto

context.putImageData( imgData, x, y,[dirtyX,
putImageData() ImageData especificado) de nuevo en el
dirtyY, dirtyWidth, dirtyHeight] );
canvas
Compositing
Determina (sets) o devuelve (returns) el valor alfa o

globalAlpha context.globalAlpha = numero 1.0
la transparencia actual del dibujo.
Define la apariencia de nuevos trazados, y como

estos afectan o están afectados por los trazados ya
context. existentes en el <canvas>.
source-
globalCompositeOperation globalCompositeOperation = posibles valores: source-over, source-in, source-out,
over
"source-in" source-atop, destination-over, destination-atop,
destination-in, destination-out, lighter, darker, copy,
xor
Other
save() context.save(); Guarda el estado actual del canvas.
restore() context.restore() Recupera el estado previamente guardado del canvas.
Devuelve un objeto (context) que proporciona todos los métodos y

propiedades para dibujar en el canvas.
Convierte el contenido del canvas en una imagen data:uri. El parámetro

toDataURL() canvas.toDataURL() "image/png"
entre paréntesis indica el tipo de imagen.
Canvas - una introducción
La etiqueta <canvas> se utiliza para dibujar gráficos. Cualquier texto dentro de este elemento se mostrará solo en los navegadores que no soportan <canvas>.
El canvas cuenta con varias métodos() y propiedades. A continuación algunas de ellas.
JavaScript Descripción Defecto
width canvas.width Determina (sets) o devuelve (returns) la anchura del canvas 300
height canvas.height Determina (sets) o devuelve (returns) la altura del canvas 150
Devuelve un objeto que proporciona todos los métodos y propiedades

para dibujar en el canvas.
Convierte el contenido del canvas en una imágen - data:uri. El

toDataURL() canvas.toDataURL(tipo); image/png
parámetro entre paréntesis indica el tipo de imágen.
Llas propiedades y metodos() de canvas.
 <canvas id= "Canvas1" width= "250" height= "220">Su navegador no soporta canvas :( </canvas>
Sin embargo, el elemento <canvas> no tiene habilidad de dibujo en sí mismo, siendo sólo un contenedor para gráficos. Por esto es importante que el <canvas> tenga
asignado un id, ya que habrá que manipularlo a través deJavaScript. Utilizaremos document.getElementById para encontrar el canvas.
El método getContext() devuelve un objeto ( puede llamar este objeto como quiera; a continuación lo llamaremosctx ) que proporciona métodos() y propiedades para
dibujar en el canvas.
window.onload = function() {
// encuentre el canvas para dibujar.
var canvas = document.getElementById("Canvas1");
// si existe el canvas y si tiene el método getContext
if (canvas && canvas.getContext) {
// utilice el método getContext para recuperar el contexto del canvas
var ctx = canvas.getContext("2d");
// y si tenemos contexto
if (ctx) {
// dibujamos
}
}
}
Para dibujar necesitaremos utilizar las coordenadas x e y del canvas: arriba en la esquina izquerda x=0; y=0;; abajo en la esquina derecha x=canvas.width; y=canvas.height;.
Pase el ratón sobre el siguiente <canvas> para ver sus coordenadas x e y:
Trazar una línea

Para dibujar lineas en el <canvas> necesitamos algunas de las propiedades y métodos predefinidos en el HTML5:

línea.
Determina (sets) o devuelve (returns) el color,

strokeStyle context.strokeStyle=color|gradient|pattern; negro
gradiente o patrón de la línea.
beginPath() context.beginPath(); Empezamos a dibujar
Mueve el "lapiz" a un punto en el canvas, especificado

x=0;
moveTo() context.moveTo(x,y); por sus coordenadas "x" e "y". NO DIBUJA ninguna
y=0;
línea.
lineTo() context.lineTo(x,y); Define una línea desde un punto especificado

anteriormente hasta otro punto especificado por sus
coordenadas "x" e "y". Mueve el "lapiz" a este punto.
Vea las propiedades y metodos() de canvas.
Supongamos que queremos dibujar una línea de 3px de gruesa ( line width = ancho de la línea ).
Escribimos: ctx.lineWidth = 3; Note por favor que escribimos 3 y no 3px. Si no especificamos lineWidth, el ancho de línea será de 1px.
Queremos tambien que nuestra línea sea roja. ( stroke style = estilo de trazado ).
Escribimos: ctx.strokeStyle = "#f00"; Si no especificamos strokeStyle, el el color del trazado será negro.
Decidido todo esto empezamos a dibujar:
ctx.beginPath();
Nuestro lapiz tocará el canvas a x=20px, y=230px.
ctx.moveTo(20, 230);
Esbozamos una línea desde x=20px, y=130px ( el punto definido anteriormente ) a x=230px, y=20px.
ctx.lineTo(230, 20);
Finalmente trazamos nuestra linea. Note por favor que sin stroke() no habrá línea: ( ctx.stroke(); )
A continuación lo ponedremos todo junto:
<canvas id= "linea1" width= "250" height= "150">Su navegador no soporta canvas :( </canvas>
var canvas = document.getElementById("linea1");
if (ctx) {
ctx.lineWidth = 3;
ctx.strokeStyle = "#f00";
ctx.beginPath();
ctx.stroke();
}
}
}
Como dibujar líneas finas
Por defecto el <canvas> de HTML5 “suaviza” las líneas, y esto queda muy bien en las líneas oblicuas. Sin embargo las líneas horizontales y verticales parecen más gruesas de
lo que son en realidad. Esto llega a ser muy evidente, incluso molesto, en líneas muy finas (ctx.lineWidth = 1), por ejemplo las coordenadas de un gráfico.
La buena noticia es que podemos eludir este problema utilizando el método translate().
En el caso de las líneas horizontales aplicaremos ctx.translate(0, .5);

Para las líneas verticales utilizaremos ctx.translate(.5, 0);
<canvas id= "linea2" width= "250" height= "75">Su navegador no soporta canvas :( </canvas>
var canvas2 = document.getElementById("linea2");
if (canvas2 && canvas2.getContext) {
var ctx = canvas2.getContext("2d");
if (ctx) {
ctx.lineWidth = 1;
ctx.strokeStyle = "#f00";
//dibuja la primera línea
ctx.beginPath();
ctx.moveTo(20, 25);
ctx.stroke();
// dibuja una segunda línea MÁS FINA;
ctx.translate(0, .5);
Puntas de línea (lineCap)
Para dibujar lineas en el <canvas>, además de los metodos que ya hemos visto, podemos utilizar la propiedadlineCap para dar formato a las puntas de línea. Los valores que
puede tomar lineCap son "butt" (tope), "round"(redondeado) y "square" (cuadrado)

línea.


x=0;
y=0;
línea.
Define una línea desde un punto especificado

lineTo() context.lineTo(x,y); anteriormente hasta otro punto especificado por sus
Determina (sets) o devuelve (returns) el aspecto de

lineCap context.lineCap="butt|round|square"; butt
las puntas de una línea.

Vea la chuleta con las propiedades y metodos() de canvas.
Veamos un ejemplo. A continuación dibujaremos 3 líneas del mismo tamaño, cada una con otro tipo de punta. La línea de arriba tiene una punta de línea
normal (ctx.lineCap = "butt";), la del medio tiene una punta de línea redondeada (ctx.lineCap = "round";), mientras que la de abajo tiene una punta de línea
cuadrada (ctx.lineCap = "square";).
 <canvas id= "juntas" width= "250" height= "200">Su navegador no soporta canvas :( </canvas>
 window.onload = function() {
 var canvas = document.getElementById("juntas");
 if (canvas && canvas.getContext) {
 var ctx = canvas.getContext("2d");
 if (ctx) {
 ctx.lineWidth = 25;
 ctx.strokeStyle = "#00f";
 // la línea de arriba
 ctx.beginPath();
 ctx.lineCap = "butt";
 ctx.moveTo(25, 50);
 ctx.lineTo(225, 50);
 ctx.stroke();
 // la línea del medio
Uniones de línea
Podemos dibujar un trazado en el <canvas> conectando lineas y curvas. Al conectar dos líneas podemos escoger también el tipo de unión.
lineWidth context.lineWidth=numero; Determina (sets) o devuelve (returns) la grosor de la línea. 1
context.strokeStyle=color | Determina (sets) o devuelve (returns) el color, gradiente o patrón

strokeStyle negro
gradient | pattern; de la línea.
Mueve el "lapiz" a un punto en el canvas, especificado por sus x=0;

moveTo() context.moveTo(x,y);
coordenadas "x" e "y". NO DIBUJA ninguna línea. y=0;
Define una línea desde un punto especificado anteriormente

lineTo() context.lineTo(x,y); hasta otro punto especificado por sus coordenadas "x" e "y".
Mueve el "lapiz" a este punto.
Determina (sets) o devuelve (returns) el aspecto de las juntas

context.lineJoin="bevel | round |
lineJoin entre líneas. Posibles valores: bevel (biselado), round mitter
miter";
(redondeado), miter (en angulo)
Determina (sets) o devuelve (return) el aspecto de las juntas en

miterLimit context.miterLimit=numero; miter. Puede tomar valores entre 1 (punta roma, aspecto 10
biselado) y 5 (punta en angulo).

Vea las propiedades y metodos() de canvas.
Veamos un ejemplo. A continuación dibujaremos 3 trazados iguales, cada una con otro tipo de unión. El trazado de arriba tiene una unión en ángulo (ctx.lineJoin =
"miter";), el del medio es redondeado ( ctx.lineJoin = "round";), mientras que el tercer trazado tiene una unión en bisel (ctx.lineJoin = "bevel";). Si no especificamos el tipo
de unión, este es por defecto en ángulo ("miter").
Hay tambien una propiedad miterLimit que representa la distancia entre la parte interna y la parte externa del ángulo donde las dos líneas se encuentran. Puede tomar
valores entre 1 (punta roma, aspecto biselado) y 5 (punta en angulo). Utilizando miterLimit podemos tramsformar una punta en angulo "miter" en una punta biselada. ( Vea
el último trazado - en rojo ).
 <canvas id= "juntas1" width= "250" height= "500">Su navegador no soporta canvas :( </canvas>
 var canvas = document.getElementById("juntas1");
 if (ctx) {
 // unión en angulo
 ctx.lineJoin = "miter";
 ctx.lineTo(200, 150);
 ctx.stroke();
 // unión redondeada
Arcos y círculos



Para dibujar círculos o segmentos circulares, utilizaremos una serie de métodos() y propiedades de <canvas>.
lineWidth context.lineWidth = numero; Determina (sets) o devuelve (returns) la grosor de la línea. 1
context.strokeStyle = color | gradient | Determina (sets) o devuelve (returns) el color, gradiente o

strokeStyle negro
pattern; patrón de la línea.
context.fillStyle = color | gradient | Determina o devuelve el color, gradiente o patrón del

fillStyle negro
pattern; relleno.

r = radio
arc() context.arc(x, y, r, ap, af , cR)
ap = ángulo de partida en radianes
af = ángulo final en radianes
cR = opcional; sentido contra reloj: true | false
arcTo() context.arcTo(x1,y1,x2,y2,r); Crea un arco de círculo entre dos tangentes x1, y1 y x2, y2

Repaso de geometría
En el canvas para trabajar con ángulos, utilizaremosradianes. Un circulo completo tiene 2π radianes, con lo cual podemos escribir: 360° = 2π rad;
o si hablamos JavaScript: 2*Math.PI;
Para convertir grados sexagesimales a radianes utilizaremos la siguiente fórmula:
radianes = (π / 180) * grados;
o en JavaScript escribiremos:
var radianes = (Math.PI / 180) * grados;
Dibujar un arco
Para dibujar un arco utilizaremos el método arc(x, y, r, ap, af, aC), donde x e y son las coordenadas del centro, ap es el ángulo de partida ( en radianes ), af es el ángulo final
( en radianes ), y cR ( contra reloj ) es la dirección. El parametro cR puede tomar dos valores: true ( verdadero, o sea: en sentido contrario al de las agujas del reloj )
y false ( falso, o sea: en el sentido de las agujas del reloj ).
 <canvas id= "arco" width= "250" height= "150">Su navegador no soporta canvas :( </canvas>
 var elCanvas = document.getElementById("arco");
 if (elCanvas && elCanvas.getContext) {
 var context = elCanvas.getContext("2d");
 if (context) {
 var X = elCanvas.width/2;
 var Y = 100;
 var r = 50;
 var aPartida = (Math.PI / 180) * 220;
 var aFinal = (Math.PI / 180) * 320;
 context.strokeStyle = "orange";
 context.lineWidth = 15;
 context.arc(X,Y,r,aPartida,aFinal,false);
 context.stroke();
 }
 }
 }
Dibujar un círculo
Para dibujar un círculo hay que trazar un arco de 360° ( 2π radianes ), o sea: el ángulo de partida ap = 0 y el ángulo final (en radianes) af = 2*Math.PI
 <canvas id= "lienzo" width= "250" height= "200">Su navegador no soporta canvas :( </canvas>
 var lienzo = document.getElementById("lienzo");
 if (lienzo && lienzo.getContext) {
 var contexto = lienzo.getContext("2d");
 if (contexto) {
 var X = lienzo.width/2;
 var Y = lienzo.height/2;
 var r = 75;
 contexto.strokeStyle = "#006400";
 contexto.fillStyle = "#6ab150";
 contexto.lineWidth = 5;
 contexto.arc(X,Y,r,0,2*Math.PI);
 contexto.fill();
 contexto.stroke();
 }
 }
 }
Más geometría
Para calcular las coordenadas de un punto en la circunferencia de un círculo utilizaremos las siguientes fórmulas:
var x = centroX + r * Math.cos(a);
var y = centroY + r * Math.sin(a);
Donde centroX y centroY son las coordenadas del centro del círculo;
r es el radio del círculo;
y a es el ángulo entre el punto 0π y este punto.
Dibujar un sector circular
A continuación vamos a dibujar un sector circular de 60°, donde el ángulo de partida ap = 60° y el ángulo final af = 120°.
Necesitamos definir algunas variables:
El centro del circulo (X,Y) cuyo sector vamos a dibujar, y el radio R de este.
var X = canvas.width/2;
var Y = 30;
var R = 140;
El ángulo de partida ap y el ángulo final af
var ap = (Math.PI / 180) * 60;
var af = (Math.PI / 180) * 120;
Las coordenadas del punto de partida en la circunferencia
var Xap = X+R * Math.cos(ap);
var Yap = Y+R * Math.sin(ap);
También hay que definir el color de relleno fillStyle y el color del borde strokeStyle. Veamos el código.
 <canvas id= "sectorCircular" width= "250" height= "200">Su navegador no soporta canvas :( </canvas>
 var canvas = document.getElementById("sectorCircular");
 if (ctx) {
 // El centro del circulo (X,Y) cuyo sector vamos a dibujar, y el radio R de este.
 var X = canvas.width/2;
 var Y = 30;
 var R = 140;
 // El ángulo de partida ap y el ángulo final af
 var ap = (Math.PI / 180) * 60;
 var af = (Math.PI / 180) * 120;
 // Las coordenadas del punto de partida en la circunferencia
 var Xap = X+R * Math.cos(ap);
 var Yap = Y+R * Math.sin(ap);
 // estilos
 ctx.fillStyle = "#abcdef";
 ctx.strokeStyle = "#1E90FF";
 // empezamos a dibujar
 ctx.moveTo(X,Y);
 ctx.lineTo(Xap,Yap);
 ctx.arc(X,Y,R,ap,af);
 ctx.closePath();
 ctx.fill();
 ctx.stroke();
 }
 }

 }
El método arcTo



En el <canvas> podemos crear esquinas redondeadas utilizando el método arcTo(). La mala noticia es que Opera no soporta el método arcTo().
lineWidth context.lineWidth = numero; Determina (sets) o devuelve (returns) la grosor de la línea. 1

context.strokeStyle = color | gradient | Determina (sets) o devuelve (returns) el color, gradiente o

strokeStyle negro
pattern; patrón de la línea.
arcTo() context.arcTo(x1,y1,x2,y2,r); Crea un arco de círculo entre dos tangentes x1, y1 y x2, y2

La propiedad arcTo()
La propiedad arcTo() crea un arco entre dos tangentes. Los parámetros utilizados son:
 x1, y1 Las coordenadas x e y del primer punto de control.
 x2, y2 Las coordenadas x e y del primer segundo de control.
 r Representa el radio de la curvatura.
La primera tangente va del punto (x0, y0) al punto (x1, y1).
La segunda tangente va del punto (x1, y1) al punto (x2, y2).
Esquinas redondeadas con arcTo
 <canvas id= "arcos" width= "250" height= "200">Su navegador no soporta canvas :( </canvas>
 var canvas = document.getElementById("arcos");
 if (ctx) {
 // define el rádio
 var r = 20;
 // las coordenadas del rectángulo;
 var x0 = 50, y0 = 50;
 var x1 = 200, y1 = 50;
 var x2 = 200, y2 = 150;
 var x3 = 50, y3 = 150;

 ctx.strokeStyle = "orange";
 ctx.moveTo(x3,y3-r);
 // dibuja un rectángulo con esquinas redondeadas
 ctx.arcTo(x0,y0,x1,y1,r);
 ctx.stroke();
 }
 }
 }
Curvas cúbicas de Bézier



Para dibujar una curva de Bézier en el <canvas> utilizaremos, además de otros métodos() y propiedades ya conocidas, un método especifico: bezierCurveTo()
Determina (sets) o devuelve (returns) la grosor de

lineWidth context.lineWidth = numero; 1
la línea.
context.strokeStyle = color | gradient | Determina (sets) o devuelve (returns) el color,

strokeStyle negro
patrón; gradiente o patrón de la línea.
Determina o devuelve el color, gradiente o patrón

fillStyle context.fillStyle = color | gradient | patrón; negro
del relleno.

cx1,cy1,cx2,cy2= coordenadas puntos de anclaje
bezierCurveTo() context.bezierCurveTo(cx1,cy1,cx2,cy2,x,y); P1 y P2 (control points)
x,y = coordenadas punto final P3 (el punto de
partida siendo determinado previamente).

Repaso de Geometría
Cuatro puntos del plano: P0, P1, P2 y P3 definen una curva cúbica de Bézier. La curva empieza en el punto P0, se dirige hacia P1 y llega a P3 viniendo de la dirección del
punto P2. Usualmente, no pasará ni por P1 ni por P2. Estos puntos sólo están ahí para proporcionar información direccional.
Lea más sobre las curvas de Bézier en Wikipedia
Veamos un ejemplo. A continuación dibujaremos una curva de Bézier en el <canvas>. Utilizaremos ctx.moveTo(x0,y0) para mover el "lapiz" en el punto P0. Para esbozar la
curva utilizaremos ctx.bezierCurveTo(x1,y1,x2,y2,x3,y3);, donde x1, y1 son las coordenadas del punto P1, etc...
Para dar estilo a la curva utilizaremos como siempre las propiedades lineWidth y strokeStyle. Al final dibujaremos la curva con stroke().
Visite cubic-bezier.com (Made by Lea Verou with care). Verá un maravilloso ejemplo de curvas de Bézier, realizado con<canvas>.
 var canvas = document.getElementById("lienzo");
 if (ctx) {
 var x0 = 20; var y0 = 160;
 var x1 = 50; var y1 = 50;
 var x2 = 230; var y2 = 0;
 var x3 = 220; var y3 = 180;

 ctx.moveTo(x0,y0);
 ctx.bezierCurveTo(x1,y1,x2,y2,x3,y3);
 ctx.stroke();
 }
 }
 }
Calcular las coordenadas de un punto en la curva
Para calcular las coordenadas de un punto en la curva de Bézier utilizaremos una fórmula encontrada en Wikipedia
 <canvas id= "lienzo1" width= "250" height= "240">Su navegador no soporta canvas :( </canvas>
 var canvas1 = document.getElementById("lienzo1");
 if (canvas1 && canvas1.getContext) {
 var ctx1 = canvas1.getContext("2d");
 if (ctx1) {
 var x0 = 20; var y0 = 160;
 var x1 = 50; var y1 = 50;
 var x2 = 230; var y2 = 0;
 var x3 = 220; var y3 = 180;

 ctx1.lineWidth = 5;
 ctx1.strokeStyle = "#00f";
 ctx1.beginPath();
 ctx1.moveTo(x0,y0);
 ctx1.bezierCurveTo(x1,y1,x2,y2,x3,y3);
 ctx1.stroke();


 //calculamos las coordenadas del punto
 var t = .7; // toma valores entre 0 - 1
 var x = (1 - t) * (1 - t) *(1 - t) * x0
 + 3 * (1 - t) * (1 - t) * t * x1
 + 3 * (1 - t) * t * t * x2
 + t * t * t * x3;
 var y = (1 - t) * (1 - t) *(1 - t) * y0
 + 3 * (1 - t) * (1 - t) * t * y1
 + 3 * (1 - t) * t * t * y2
 + t * t * t * y3;

 // dibujamos un punto rojo
 ctx1.fillStyle = "red";
 ctx1.arc(x,y,10,0,2*Math.PI);
 ctx1.fill();
 }
 }
 }
Curvas cuadráticas de Bézier



Para dibujar una curva de Bézier en el <canvas> utilizaremos, además de otros métodos() y propiedades ya conocidas, un método especifico: bezierCurveTo()

la línea.

strokeStyle negro
context.fillStyle = color | gradient | Determina o devuelve el color, gradiente o patrón

fillStyle negro
patrón; del relleno.
Define una curva cuadráticas de Bézier.

cx,cy = coordenadas punto de anclaje (control
quadraticCurveTo() context.quadraticCurveTo(cx,cy,x,y); point)
x,y = coordenadas punto final (el punto de partida
siendo determinado previamente).

Repaso de Geometría
Tres puntos del plano: a, pc y z definen una curva cuadrática de Bézier. La curva empieza en el punto a, se dirige hacia pc ( punto de control ) y llega a z viniendo de la
dirección del punto de control. Usualmente, no pasará por pc. Este punto sólo proporciona información direccional.
Lea más sobre las curvas de Bézier en Wikipedia
Veamos un ejemplo. A continuación dibujaremos una curva cuadrátic de Bézier en el <canvas>. Utilizaremosctx.moveTo(ax,ay) para mover el "lapiz" en el punto a. Para
esbozar la curva utilizaremos ctx.quadraticCurveTo( pcx,pcy,zx,zy ), donde pcx,pcy son las coordenadas del punto de control pc, y zx, zy son las coordenadas del punto
final z.
Para dar estilo a la curva utilizaremos como siempre las propiedades lineWidth y strokeStyle. Al final dibujaremos la curva con stroke().
 if (ctx) {
 var ax = 20, ay = 130;
 var pcx = 40, pcy = 15;
 var zx = 180, zy = 170;

 ctx.strokeStyle = "blue";
 ctx.moveTo(ax,ay);// aquí empieza la curva
 ctx.quadraticCurveTo(pcx,pcy,zx,zy);
 ctx.stroke();
 }
 }
 }
Calcular las coordenadas de un punto en la curva
Para calcular las coordenadas de un punto en la curva de Bézier utilizaremos una fórmula encontrada en Vikipedia
 if (ctx1) {
 var x0 = 20, y0 = 130;
 var x1 = 40, y1 = 15;
 var x2 = 180, y2 = 170;

 ctx1.strokeStyle = "blue";
 ctx1.lineWidth = 5;
 ctx1.moveTo(x0,y0);
 ctx1.quadraticCurveTo(x1,y1,x2,y2);
 ctx1.stroke();

 // calculamos las coordenadas del punto
 // con una fórmula encontrada en wikipedia
 var t = .7; // valor entre 0 - 1
 x = (1 - t) * (1 - t) * x0 + 2 * (1 - t) * t * x1 + t * t * x2;
 y = (1 - t) * (1 - t) * y0 + 2 * (1 - t) * t * y1 + t * t * y2;

 ctx1.fillStyle = "red";
 ctx1.arc(x,y,10,0,2*Math.PI);
 ctx1.fill();
 }
 }
 }
Dibujar un óvalo



Un óvalo, en geometría, es un círculo aplastado que se asemeja a una forma ovoide o elíptica. A diferencia de otras curvas, el término óvalo no está claramente definido, y
muchas curvas diferentes son llamadas óvalos. Su forma no se aparta mucho de la de una circunferencia o una elipse.

context.arc(x, y, r, sA, eA, r = radio
arc()
aC) sA = ángulo de partida en radianes
eA = ángulo final en radianes
aC = sentido contra reloj (anti-Clockwise) true | false

scale() context.scale(h,v); h = horizontal; v = vertical 1
Valores que pueden tomar los parametros del método: 1=100%, 0.5=50%,
2=200%, etc...
Más información acerca de los métodos save() y restore().
Para dibujar un óvalo, dibujaremos un círculo, que aplastaremos luego, utilizando el método scale().
Importante: para centrar el óvalo resultante hemos dibujado el circulo original hacia la izquierda.
 <canvas id= "linea1" width= "250" height= "150">Su navegador no soporta canvas :( </canvas>
 var canvas = document.getElementById("linea1");
 if (ctx) {
 //calculamos el centro del canvas
 var centroX = ctx.canvas.width/2;
 var centroY = ctx.canvas.height/2;
 // guardamos el estado inicial
 ctx.save();
 var radio = 50;
 // modificamos la escala horizontalmente
 ctx.scale(2, 1);
 // dibujamos un círculo que será aplastado en un óvalo
 ctx.arc( centroX / 2, centroY, radio, 0, 2 * Math.PI );
 // restauramos el estado inicial, el de antes de modificar la escala
 // de esta manera el borde no será aplastado
 ctx.restore();
 // trazamos el borde
 ctx.stroke();
 }
 }
 }
Dibujar una elipse



En este momento no hay ningun método() de <canvas> que nos ayude dibujar elipses. Sin embargo el internet es una fuente ilimitada de recursos donde podemos
encontrar de todo, incluso funciones que nos facilita dibujar elipses.

la línea.

strokeStyle negro
pattern; gradiente o patrón de la línea.

fillStyle context.fillStyle = color | gradient | pattern; negro
del relleno.

cx1,cy1,cx2,cy2= coordenadas puntos de anclaje
bezierCurveTo() context.bezierCurveTo(cx1,cy1,cx2,cy2,x,y); (control points)
x,y = coordenadas punto final (el punto de partida
siendo determinado previamente).

Para una elipse dibujaremos cuatro curvas de Bézier, una para cada cuadrante. Para determinar el desplazamiento horizontal y vertical ( offset ) de los puntos de control, y
por tanto la curvatura de la elipse, utilizaremos una constante llamada kappa.
La función dibujarElipse(ctx, x, y, w, h), que escribimos, toma seis argumentos: ctx reprezenta el contexto del <canvas>, x e y representan las coordenadas del punto de
origen, mientras que w y h representan la anchura ( w ) y respectivamente la altura ( h ) de nuestra elipse. El parámetro lw representa la grosor de la línea, definida
con lineWidth.
Las otras coordenadas las calcularemos en función de x, y, w y h.
Consejo: Pruebe modificar el valor de kappa. Si kappa = 1 obtendremos un rectangulo con las esquinas ligeramente redondeadas. Si kappa = 0 el rezultado será un rombo.
Para saber más acerca de kappa visite la página de Adam Stanislav Drawing a circle with Bézier Curve
 if (ctx) {
 dibujarElipse(ctx, 25, 25, 200, 120, 5);
 }
 }

 function dibujarElipse(ctx, x, y, w, h, lw) {
var kappa=0.5522847498;
var ox = (w / 2) * kappa; // desplasamiento horizontal (offset)
var oy = (h / 2) * kappa; // desplazamiento vertical (offset)
var xf = x + w; // x final
var yf = y + h; // y final
var xm = x + w / 2; // x medio
var ym = y + h / 2; // y medio
ctx.beginPath();
ctx.lineWidth = lw;
ctx.strokeStyle = "#00f";
ctx.moveTo( x, ym );
ctx.bezierCurveTo( x, ym - oy, xm - ox, y, xm, y );
ctx.bezierCurveTo( xm + ox, y, xf, ym - oy, xf, ym );
ctx.bezierCurveTo( xf, ym + oy, xm + ox, yf, xm, yf );
ctx.bezierCurveTo( xm - ox, yf, x, ym + oy, x, ym );
ctx.closePath();
ctx.stroke();
 }
 }
Cerrar un trazado



Podemos dibujar formas geometricas en el <canvas> conectando varias líneas en un trazado. Para cerrar el trazado podemos dibujar una línea que une el el último punto
con el origen de nuestro trazado, o podemos utilizar el método closePath() (cerrar trazado) y dejar el HTML5 que lo haga para nosotros.

línea.


x=0;
y=0;
línea.
Define una línea desde un punto especificado

lineTo() context.lineTo(x,y); anteriormente hasta otro punto especificado por sus
closePath() context.closePath(); Cierra una línea poligonal.

Veamos un ejemplo. A continuación dibujaremos un triángulo. Utilizaremos como siempre el método beginPath()para empezar el trazado. Utilizaremos el
método moveTo() para mover el "lapiz" hasta el origen de nuestro trazado; esbozaremos dos de los tres lados utilizando el método lineTo(), y cerraremos el trazado
utilizando el métodoclosePath(). Al final hay que utilizar stroke() para marcar el trazado.
 <canvas id= "juntas" width= "250" height= "240">Su navegador no soporta canvas :( </canvas>
 var canvas = document.getElementById("juntas");
 if (ctx) {

 ctx.lineTo(225, 200);
 ctx.stroke();
 }
 }
 }
Rectángulos



Los rectángulos son por ahora las únicas formas geometricas primitivas soportadas por <canvas>. O sea: podemos dibujar rectángulos utilizando métodos y propiedades
especificas.
rect() context.rect(x,y,anchura,altura); Dibuja un rectángulo desde un punto (x,y).

fillStyle context.fillStyle = color | gradient | pattern; negro
del relleno.
fill() context.fill(); Rellena una forma geométrica. negro
fillRect() context.fillRect(x,y,anchura,altura); Dibuja y rellena un rectángulo desde un punto (x,y).

línea.
strokeStyle context.strokeStyle = color | gradient | Determina o devuelve el color, gradiente o patrón negro
pattern; de la línea.
strokeRect() context.strokeRect(x,y,anchura,altura); Dibuja un rectángulo desde un punto (x,y).
Borra los píxeles especificados dentro de un

clearRect(); context.clearRect(x,y,width,height);
rectángulo dado.
Dibujar un rectángulo
Veamos un ejemplo. A continuación dibujaremos un rectángulo. Utilizaremos lineWidth y strokeStyle para establecer el estilo de línea. Utilizaremos fillStyle para establecer
el tipo de relleno.
Para esbozar el rectángulo utilizaremos el método rect(x,y,anchura,altura) y para el relleno el métodofillRect() . Observe por favor que intencionadamente hemos
desplazado el relleno unos 10px hacia la derecha y abajo. ( También podemos utilizar el método fill() para rellenar el rectángulo, aunque esto no nos permite desplazar el
relleno. )
Los métodos rect(x,y,anchura,altura) y fillRect(x,y,anchura,altura) toman cuatro argumentos. Los primeros dos argumentos (x,y) representan las coordenadas de la esquina
izquierda arriba del rectángulo ( o del relleno ). Los siguientes dos representan la anchura y la altura del mismo.
Al final hay que utilizar stroke() para marcar el trazado. De esta manera el trazado estará por encima del relleno.
 if (ctx) {
 ctx.rect(50, 50, 150, 100);
 ctx.fillStyle = "#ff0";
 ctx.fillRect(60, 60, 150, 100);
 ctx.stroke();
 }
 }
 }
Borrar con clearRect()
Para limpiar el canvas podemos utilizar el método clearRect(). Exactamente como rect() o strokeRect(),clearRect() toma cuatro atributos: x, y, anchura y altura, pero en
lugar de dibujar un rectángulo, está borrando del <canvas> los pixeles situados dentro. El método clearRect() es muy útil, especialmente en animaciones.
En el siguiente ejemplo el <canvas> tiene una imagen de fondo asignada con el CSS. Después de haber dibujado un rectángulo, utilizaremos el método clearRect() para
borrar parte de este.
 <canvas id= "lienzo1" width= "250" height= "232" style= "background-image:url(images/enfeinada250.jpg)">Su navegador no soporta canvas :( </canvas>
 if (ctx1) {
 ctx1.fillStyle = "#ad0";
 ctx1.fillRect(50, 40, 150, 120);
 ctx1.clearRect(70, 60, 110, 60);
 }
 }
 }
Dibujar un hexágono



Un hexágono regular es un polígono con 6 lados iguales y 6 ángulos iguales (120°).
Para construir un hexágono trazaremos un circulo imaginario con el radio R y el centro en un punto (X,Y). En nuestro caso este punto coincide con el centro del <canvas>.
A continuación tenemos que encontrar 6 puntos equidistantes situados en la circunferencia. Estos puntos están situados a 60° uno de otro. Si unimos estos puntos
conseguimos un hexágono.
Para calcular las coordenadas de un punto en la circunferencia de un círculo utilizaremos las siguientes fórmulas:
var x = X + R * Math.cos(a);
var y = Y + R * Math.sin(a);
Donde X e Y son las coordenadas del centro del círculo;
R es el radio del círculo;
Y a es el ángulo entre el punto 0π y este punto. No hay que olvidar que en el <canvas> tenemos que utilizar radianes. Sesenta grados en radianes son:
var rad = (Math.PI / 180) * 60;
Como que los 6 puntos son equidistantes podemos utilizar un bucle for ( for loop ) para trazar el hexágono.
ctx.beginPath();
for( var i = 0; i<6; i++ ){
x = X + R * Math.cos(rad*i);
y = Y + R * Math.sin(rad*i);
ctx.lineTo(x, y);
}
ceramos el trazado y rellenamos:
ctx.closePath();
ctx.fill();
 if (ctx) {
var R = 100;
var Y = canvas.height/2;
ctx.fillStyle = "#6ab150";
// un angulo de 60 deg.
var rad = ( Math.PI / 180 ) * 60;
ctx.beginPath();
for( var i = 0; i<6; i++ ){
x = X + R * Math.cos( rad*i );
y = Y + R * Math.sin( rad*i );
ctx.lineTo(x, y);
}
ctx.closePath();
ctx.fill();
 }
 }
 }
Polígonos regulares



Un polígono regular es un polígono en el que todos los lados tienen la misma longitud y todos los ángulos interiores tienen el mismo valor. Todos los polígonos regulares se
pueden inscribir perfectamente en una circunferencia.
Para dibujar un polígono regular, ( o cualquier otro trazado ) necesitamos definir algunas propiedades de <canvas>
ctx.strokeStyle = "black";
ctx.lineWidth = 3;
Todos los polígonos regulares se pueden inscribir en una circunferencia. Por lo tanto definiremos la posición del centro y el radio de este círculo:
var Y = canvas.height / 2;
var R = 100;
Y lo más importante: definiremos el número de lados L del polígono.
var L = 5;
Todos los ángulos centrales de un polígono regular son iguales entre si y su medida rad puede obtenerse a partir del número de lados L del polígono:
var rad= 2*Math.PI / L
Para dibujar el trazado utilizaremos un bucle for ( for loop ), donde con cada paso del bucle dibujaremos un lado del polígono.
<canvas id= "lienzo" width= "250" height= "240">Su navegador no soporta canvas :( </canvas>
var canvas = document.getElementById("lienzo");
if (ctx) {
ctx.lineWidth = 3;
var Y = canvas.height/2;
var R = 100;
// el número de lados del polígono
var L = 5;
// si L == 6 el ángulo es de 2π/6 o sea 60°
var rad = (2*Math.PI)/L;
// dibuja el trazado
ctx.beginPath();
for( var i = 0; i<L; i++ ){
ctx.lineTo(x, y);
}
ctx.closePath();
ctx.fill();
ctx.stroke();
}
}
}
Arreglar desperfectos
El pentágono ha salido muy bien, pero no estaría nada mal poder girarlo alrededor de su centro. Para esto tendremos que utilizar dos otros métodos
del <canvas>: translate() y rotate(). Como que trasladaremos el contexto en el centro del <canvas> tendremos que redefinir las variables X e Y.
var X = 0;
var Y = 0;
Veamos como queda.
 var ctx = canvas1.getContext("2d");
 if (ctx) {
ctx.lineWidth = 3;
var X = 0;
var Y = 0;
var R = 100;
var L = 5;
// si L == 6 el ángulo es de 2π/6 o sea 60°
var rad = (2*Math.PI)/L;
// traslada el contexto en el centro del canvas
// para poder girar el contexto alrededor del centro
ctx.translate(canvas1.width/2, canvas1.height/2);
//gira el contexto unos 270º
ctx.rotate(3*Math.PI/2);
// dibuja el trazado
ctx.beginPath();
for( var i = 0; i<L; i++ ){
ctx.lineTo(x, y);
}
ctx.closePath();
ctx.fill();
ctx.stroke();
 }
 }
 }
.
Dibujar estrellas



Las estrellas que dibujaremos a continuación son polígonos estrellados, y pueden trazarse "sin levantar el lápiz".
Para dibujar una estrella, ( o cualquier otro trazado ) necesitamos definir algunas propiedades de <canvas>
ctx.lineWidth = 3;
Las estrellas, como los demás polígonos regulares, se pueden inscribir en una circunferencia. Por lo tanto definiremos la posición del centro y el radio de este círculo:
var R = 100;
Y lo más importante: definiremos el número de lados L de la estrella y el paso.
var L = 5;
var paso = 2
Todos los ángulos son iguales entre si y su medida rad puede obtenerse a partir del número de lados L del polígono:
var estrella = L / paso
var rad= 2*Math.PI / estrella
Para dibujar el trazado utilizaremos un bucle for ( for loop ), donde con cada paso del bucle dibujaremos un lado de la estrella.
 if (ctx) {
ctx.lineWidth = 6;
var X = canvas.width / 2;
var R = 100;
var L = 5;
var paso = 2
var estrella= L / paso

var rad = (2*Math.PI) / estrella;
ctx.beginPath();
for( var i = 0; i<L; i++ ){
ctx.lineTo(x, y);
}
ctx.closePath();
ctx.stroke();
ctx.fill();
 }
 }
 }
Arreglar desperfectos
La estrella ha salido muy bien, pero no estaría nada mal poder girarlo alrededor de su centro. Para esto tendremos que utilizar dos otros métodos
del <canvas>: translate() y rotate(). Como que trasladaremos el contexto en el centro del <canvas> tendremos que redefinir las variables X e Y.
var X = 0;
var Y = 0;
Veamos como queda.
 var ctx = canvas1.getContext("2d");
 if (ctx) {
 ctx.fillStyle ="#6ab150";
 var X = 0;
 var Y = 0;
 var R = 100;

 var L = 5;
 var paso = 2;

 var estrella= L / paso;
 var rad = (2*Math.PI) / estrella;

 // traslada el contexto en el centro del canvas
 ctx.translate(canvas1.width / 2, canvas1.height / 2);
 //gira el contexto unos 270º
 ctx.rotate(3*Math.PI/2);
 // dibuja el trazado
 for( var i = 0; i<L; i++ ){
 x = X + R * Math.cos( rad*i );
 y = Y + R * Math.sin( rad*i );
 ctx.lineTo(x, y);
 }
 ctx.stroke();
 ctx.fill();
 }
 }
 }
Borrar con clearRect()

Para limpiar el canvas podemos utilizar el método clearRect(). Exactamente como rect() o strokeRect(),clearRect() toma cuatro atributos: x, y, anchura y altura, pero en
lugar de dibujar un rectángulo, está borrando del <canvas> los pixeles situados dentro. El método clearRect() es muy útil, especialmente en animaciones.
En el siguiente ejemplo el <canvas> tiene una imagen de fondo asignada con el CSS. Después de haber dibujado un rectángulo, utilizaremos el método clearRect() para
borrar parte de este.
 <canvas id= "lienzo1" width= "250" height= "232" style= "background-image:url(images/enfeinada250.jpg)">Su navegador no soporta canvas :( </canvas>
 if (ctx1) {
 ctx1.fillStyle = "#ad0";
 ctx1.fillRect(50, 40, 150, 120);
 ctx1.clearRect(70, 60, 110, 60);
 }
 }
 }
Regiones de recorte (clipping region)




El <canvas> de HTML5 nos da la posibilidad de crear regiones de recorte ( clipping regions ). ( Hay un cierto parecido entre una región de recorte en el <canvas> y una
máscara de Photoshop. )
Recorta una región con la forma y tamaño del trazado dibujado previamente en el
clip() context.clip() canvas. Cualquier cosa dibujada después, será visible solo dentro de la región de <canvas>
recorte ( clipping region ).

Inicialmente el entero <canvas> es por defecto una región de recorte. Para definir una nueva región, dibujaremos un trazado con la forma y el tamaño deseados. Después
llamaremos el método clip() que transformará el trazado previamente dibujado en una nueva región de recorte, reemplazando de esta manera, la región de recorte
anterior ( o sea: el <canvas> mismo ).
Importante: el contexto de <canvas> no acepta más que una sola región de recorte.
En el siguiente ejemplo esbozaremos un circulo con el radio de 100px y, llamaremos el método clip() para convertirlo en una nueva región de recorte.
 <canvas width= "250" height= "240" id= "lienzo">Su navegador no soporta canvas :( </canvas>
 if (ctx) {
 ctx.arc(125,120,100,0,2*Math.PI);
 ctx.clip();
 var img=new Image();
 img.src = "images/enfeinada250.jpg";
 img.onload = function() {
 ctx.drawImage(this, 0, 20);
 }
 }
 }
 }
Todo parece funcionar muy bien, pero en Google Chrome el borde de nuestra imagen aparece pixelado y muy feo. Para arreglar este desperfecto, echaremos mano de
otros dos métodos de <canvas>:
save() ( guardar ) y restore() ( restaurar ).
Arreglar desperfectos ( solución patosa )
El método save() guardará el estado del contexto de <canvas>, el de antes de definir la nueva región de recorte. El método restore() restaurará este estado, per tal de poder
dibujar de nuevo en el <canvas>, como lo habríamos hecho al principio.
Después de restaurar el estado inicial del contexto podemos dibujar un borde ( blanco en este caso ) alrededor de nuestra imagen, que arreglará dicho desperfecto.
 <canvas width= "250" height= "240" id= "lienzo1">Su navegador no soporta canvas :( </canvas>
 if (ctx1) {
 ctx1.save();
 ctx1.arc(125,120,100,0,2*Math.PI);
 ctx1.clip();
 ctx1.drawImage(this, 0, 20);
 ctx1.restore();

 ctx1.strokeStyle = "white";
 ctx1.lineWidth=2;
 ctx1.arc(125,120,100,0,2*Math.PI);
 ctx1.stroke();
 }
 }
 }
 }
Y sí, funciona. Pero, esta no es más que una chapuza, y la verdad es que lo podemos hacer mucho mejor.
Arreglar desperfectos ( con globalCompositeOperation )
Esta vez en lugar de clip() utilizaremos la propiedad globalCompositeOperation. Para saber más acerca de globalCompositeOperation por favor lea el siguiente capitulo
acerca de combinar trazados
 if (ctx2) {
 ctx2.arc(125,120,100,0,2*Math.PI);
 ctx2.fill()
 // ctx2.clip ( );
 ctx2.globalCompositeOperation = "source-atop";
 ctx2.drawImage(this, 0, 20);
 }
 }
 }
 }
Combinar trazados
globalCompositeOperation



Para combinar trazados en el <canvas> podemos utilizar la propiedad globalCompositeOperation. Esta propiedad define la apariencia de nuevos trazados, y como estos
afectan o están afectados por los trazados ya existentes en el <canvas>.
La propiedad globalCompositeOperation puede tomar 12 valores diferentes.
Un poco de inglés
Podemos traducir destination image ( la imagen azul de los ejemplos anteriores ) como imagen de destino y representa la imagen ya existente en el <canvas> cuando
empezamos a dibujar el nuevo trazado.
Por tanto cuando el valor de la propiedad globalCompositeOperation = "destination-over" quiere decir que la imagen de destino, o la imagen existente está encima ( over )
de la nueva imagen.
Podemos traducir source image ( la imagen anaranjada de los ejemplos anteriores ) como imagen de origen oimagen fuente y representa la nueva imagen que dibujaremos
en el <canvas>.
Por tanto cuando el valor de la propiedad globalCompositeOperation = "source-over" quiere decir que la imagen de origen, o la nueva imagen está encima ( over ) de la
imagen de destino.
Valor Descripcion
source-over Valor por defecto. La nueva imagen ( source ) aparece ENCIMA de la imagen existente ( destination ).
Valor Descripcion
La nueva imagen ( source ) aparece SOLO ENCIMA de la imagen existente ( destination ),

source-in
mientras que la imagen existente vuelve transparente.
La nueva imagen ( source ) aparece solo AL EXTERIOR de la imagen existente ( destination ), mientras que la
source-out
imagen existente vuelve transparente.
source-atop La nueva imagen ( source ) aparece SOLO ENCIMA de la imagen existente ( destination ).
destination-
La imagen existente( destination ) aparece ENCIMA de la nueva imagen ( source ).
over
destination-
La imagen existente( destination ) aparece SOLO ENCIMA de la nueva imagen ( source ).
atop
La imagen existente ( destination ), aparece SOLO ENCIMA de la nueva imagen ( source )

destination-in
mientras que la nueva imagen ( source ) vuelve transparente.
destination- La imagen existente ( destination ), aparece solo AL EXTERIOR de la nueva imagen ( source ) mientras que la
out nueva imagen vuelve transparente.
lighter La intersección de las dos imágenes más clara.
darker La intersección de las dos imágenes más oscura.
copy Solo la nueva imagen ( source ) está visible, mientras que la imagen existente ( destination ), es ignorada.
La nueva imagen ( source ) se combina con la imagen existente ( destination ) utilizando una disyunción
Xor
exclusiva (exclusive or).
Un ejemplo fácil con "xor"
A continuación superpondremos dos rectángulos que combinaremos con globalCompositeOperation = "xor".
 var canvas = document.getElementById("lienzo1");
 if (ctx) {
var x=80, y=15, w=75, h=75, color = "#0000ff";
var x1=95, y1=40, w1=75, h1=75, color1 = "#ff6400";
ctx.globalCompositeOperation = "xor";
ctx.fillStyle = color;
ctx.fillRect(x,y,w,h);
ctx.fillStyle = color1;
ctx.fillRect(x1,y1,w1,h1);
 }
 }
 }
Otro ejemplo con "destination-out"
En el siguiente ejemplo el <canvas> tiene una imagen de fondo asignada con el CSS. Después de haber dibujado un rectángulo, utilizaremos el
método globalCompositeOperation = "destination-out" para borrar parte de este.
 <canvas width= "250" height= "232" id= "lienzo2" style= "background-image:url(images/enfeinada250.jpg)">Su navegador no soporta canvas :( </canvas>
 if (ctx1) {
ctx1.beginPath();
ctx1.fillStyle = "#6a50b1";
ctx1.fillRect(50, 40, 150, 120);
ctx1.globalCompositeOperation = "destination-out";
ctx1.fillRect(70, 60, 110, 60);
 }
 }
 }
Semilla de la vida con "xor"



La Semilla de la Vida es el nombre que se da a una figura geométrica compuesta de 6 círculos completes, todos del mismo diámetro, y para algunos tiene un significado
místico y esotérico. Aquí nos interesa solo como dibujarla, ya que nos permite practicar con la propiedad globalCompositeOperation de <canvas>.
Empezaremos esbozando un circulo imaginario con el centro en la esquina superior izquierda del <canvas> (var cX = 0, cY = 0) con un radio de 60px ( var r = 60;). No hay
que trazarlo. Solo servirá de guía.
Trasladaremos el contexto en el centro del canvas: ctx.translate(ctx.canvas.width/2,ctx.canvas.height/2);
Para dibujar la "semilla de la vida" necesitaremos 6 círculos cuyos centros están dispuestos equidistantemente en la circunferencia del circulo guía, o sea formando un
ángulo "a" de 60° entre ellos. Recordemos que en radianes 60° = Math.PI/3.
Observamos que podemos escribir un bucle for para construir los 6 circulos.
Para el centro del primer circulo el ángulo a = (Math.PI/3)*0 radianes.
Para el centro del segundo circulo el ángulo a = (Math.PI/3)*1 radianes.
Para el centro del tercer circulo el ángulo a = (Math.PI/3)*2 radianes.
etc...
Falta encontrar las coordenadas de los centros, y la fórmula ya la conocemos:
X = cX+r*cos(a);
Y = cY+r*sin(a);
donde "a" es el ángulo calculado anteriormente.
Al final dibujaremos los círculos utilizando el método arc(), y los combinaremos a cada uno con el circulo anterior utilizando ctx.globalCompositeOperation = "xor";
Ahora podemos cerrar el bucle for.
 if (ctx) {
 var cX = 0;
 var cY = 0;
 var r = 60;
// definimos el estilo de relleno
ctx.fillStyle = "blue";
// trasladamos el contexto en el centro del canvas
ctx.translate(ctx.canvas.width/2,ctx.canvas.height/2);
// girar 90°
ctx.rotate( Math.PI/2 );
// utilizamos un bucle for para construir los 6 circulos

for( var i=0; i < 6; i++ ){
var a = ( Math.PI/3 )*i

var X = cX+r * Math.cos(a);
var Y = cY+r * Math.sin(a);
// dibujamos los circulos
ctx.beginPath();
ctx.arc(X, Y, r, 0, 2 * Math.PI);
ctx.fill();
//combinamos trazados con xor
ctx.globalCompositeOperation = "xor";
 }
 }
 }
 }
Dibujar un pajarito
o clip versus globalCompositeOperation



Vamos a practicar un poco lo que hemos aprendido hasta ahora, dibujando un pajarito regordete, que al inicio nos causará problemas en Google Chrome. Pero ¡no temáis!
porque bien está lo que bien acaba.
Recorta una región con la forma y tamaño del

trazado dibujado previamente en el canvas.
clip() context.clip() <canvas>
Cualquier cosa dibujada después, será visible solo
dentro de la región de recorte ( clipping region ).
Define la apariencia de nuevos trazados, y como

estos afectan o están afectados por los trazados
context. ya existentes en el <canvas>.
source-
globalCompositeOperation globalCompositeOperation = posibles valores: source-over, source-in, source-
over
"source-in" out, source-atop, destination-over, destination-
atop, destination-in, destination-out, lighter,
darker, copy, xor
Dibujar pajarito con clip()
Empezaremos dibujando la colita, el pico y las patas. Después esbozaremos un circulo con el radio de 70px y, llamaremos el método clip() para convertirlo en una
nueva región de recorte ( clipping region ), que representará el cuerpo del pajarito. Dentro dibujaremos barriguita, ala, y todo lo demás.
 if (ctx) {
//colita
ctx.beginPath()
ctx.fillStyle = "#fcc";
ctx.fill();
// pico
ctx.beginPath()
ctx.fillStyle = "#f90";
ctx.moveTo(35, 95);
ctx.lineTo(70, 85);
ctx.fill();
//patas
ctx.beginPath()
ctx.fillStyle = "#cc9";
ctx.fill();
var cX = ctx.canvas.width/2;
var cY = ctx.canvas.height/2;
var r = 70;
// recortamos!!!
ctx.beginPath();
ctx.arc(cX,cY,r,0,2*Math.PI);
ctx.clip();
// cuerpo
ctx.beginPath();
ctx.fillStyle = "#ccc";
ctx.arc(cX,cY,r,0,2*Math.PI);
ctx.fill();
// barriguita
ctx.beginPath();
ctx.fillStyle = "#cc9";
ctx.arc(125,180,r,0,2*Math.PI);
ctx.fill();
// ala
ctx.beginPath();
ctx.fillStyle = "#fcc";
ctx.arc(180,105,r,0,2*Math.PI);
ctx.fill();
// ojo
ctx.beginPath();
ctx.fillStyle = "#000";
ctx.arc(90,90,4,0,2*Math.PI);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = "#eee";
ctx.arc(90,90,2,0,2*Math.PI);
ctx.fill();
 }
 }
 }
Todo parece funcionar muy bien, pero en Google Chrome el borde del cuerpo ( la región de recorte ) aparece pixelado y muy feo ( por culpa del Anti Aliasing ) y NO lo
podemos arreglar con un borde, ya que de esta manera el borde aparecería entre el cuerpo y la colita y las demás cosas.
Dibujar pajarito con "source-atop"
Borramos las líneas de código que definen la región de recorte ( las lineas 34-37 del ejemplo anterior ), y enseguida después de dibujar el cuerpo del pajarito escribimos esta
línea de código:
ctx.globalCompositeOperation = "source-atop";
Utilizando "source-atop" haremos que todos los trazados dibujados después ( source ) sean visibles solo encima del cuerpo del animal ( destination ).
 if (ctx1) {
//colita
ctx1.beginPath()
ctx1.fillStyle = "#fcc";
ctx1.moveTo(165, 175);
ctx1.lineTo(210, 168);
ctx1.fill();
// pico
ctx1.beginPath()
ctx1.fillStyle = "#f90";
ctx1.fill();
//patas
ctx1.beginPath()
ctx1.fillStyle = "#cc9";
ctx1.fill();
var cX = ctx1.canvas.width/2;
var cY = ctx1.canvas.height/2;
var r = 70;
// cuerpo
ctx1.beginPath();
ctx1.fillStyle = "#ccc";
ctx1.arc(cX,cY,r,0,2*Math.PI);
ctx1.fill();
//globalCompositeOperation en lugar de clip

ctx1.globalCompositeOperation = "source-atop";
// barriguita
ctx1.beginPath();
ctx1.fillStyle = "#cc9";
ctx1.arc(125,180,r,0,2*Math.PI);
ctx1.fill();
// ala
ctx1.beginPath();
ctx1.fillStyle = "#fcc";
ctx1.arc(180,105,r,0,2*Math.PI);
ctx1.fill();
// ojo
ctx1.beginPath();
ctx1.fillStyle = "#000";
ctx1.arc(90,90,4,0,2*Math.PI);
ctx1.fill();
ctx1.beginPath();
ctx1.fillStyle = "#eee";
ctx1.arc(90,90,2,0,2*Math.PI);
ctx1.fill();
 }
 }
 }
Color de relleno



Podemos rellenar las formas geometricas dibujadas en el <canvas> utilizando el método fill(). Para los rectángulos podemos utilizar el método fillRect() y para el texto
utilizaremos el método fillText().
Previamente tenemos que especificar el estilo de relleno fillStyle, ya sea color, gradiente o patrón. Si no especificamos un estilo de relleno, este será por defecto negro.
fillStyle context.fillStyle=color|gradient|pattern; Determina o devuelve el color, gradiente o patrón del relleno. #000;
fillRect() context.fillRect(x,y,anchura,altura); Dibuja y rellena un rectángulo desde un punto (x,y). #000;
fillText() context.fillText(text,x,y,maxWidth); Dibuja texto relleno con un color, gradiente o patrón #000;
previamente definido.
maxWidth es opcional. No se admite en Safari.
fill() context.fill(); Rellena una forma geométrica. #000;

Veamos un ejemplo. A continuación dibujaremos un triángulo. Utilizaremos como siempre el método beginPath()para empezar el trazado. Utilizaremos el
método moveTo() para mover el "lapiz" hasta el origen de nuestro trazado; esbozaremos dos de los tres lados utilizando el método lineTo(). No es necesario cerrar el
trazado. Tampoco es necesario trazarlo.
Utilizaremos fillStyle para definir el relleno ( amarillo en este caso ), y utlilizaremos el método fill() para rellenar de color el triángulo.
Para rellenar de color un rectángulo es mucho más fácil. Sencillamente definimos el relleno con fillStyle y después utilizaremos el método fillRect(x,y,anchura,altura) para
rellenar el rectángulo.
Para texto utilizaremos el método fillText(text,x,y). El parámetro maxWidth no se admite en Safari.
 if (ctx) {
 // dibujamos y rellenamos un trazado
 ctx.fillStyle = "#ff0";
 ctx.fill();
 // dibujamos y rellenamos un rectángulo
 ctx.fillStyle = "#b00";
 ctx.fillRect(100,75,110,60);
 // rellenamos texto
 ctx.fillStyle = "#0b0";
 ctx.font="25pt Georgia";
 ctx.fillText("\241Hola Mundo!",20,120);
 }
 }
 }
Gradiente lineal



El gradiente lineal se puede utilizar como relleno para formas geométricas, líneas y texto dentro del <canvas>.
Crea un gradiente lineal para utilizar en

el<canvas>
x0,y0 son las coordenadas del punto donde
createLinearGradient() context.createLinearGradient(x0,y0,x1,y1);
empieza el gradiente.
x1,y1 son las coordenadas del punto donde
acaba el gradiente.
Especifica los colores y la posición donde

addColorStop() gradient.addColorStop(stop,color);
para el gradiente.
context.fillStyle = color | gradiente | Determina o devuelve el color, gradiente o

fillStyle negro
patrón; patrón del relleno.

Los gradientes lineales son definidos por una línea imaginaria que nos da la dirección del gradiente.
El método createLinearGradient(x0,y0,x1,y1) toma cuatro argumentos.
Los primeros dos argumentos (x0,y0) representan las coordenadas del origen de nuestra línea, mientras que los siguientes dos argumentos (x1,y1) representan las
coordenadas del punto donde esta línea acaba.
El método addColorStop(stop,color) toma dos argumentos.
El primer argumento, stop, puede tomar valores desde 0.0 hasta 1.0, y representa una posición a lo largo del vector gradiente definido anteriormente con
método createLinearGradient(). Podemos utilizar el métodoaddColorStop() tantas veces como creamos necesario.
El segundo argumento representa el color, que puede tomar cualquier valor aceptado en el CSS ( nombres de colores, valores hex, rgb, rgba, hsl, hsla).
Veamos un ejemplo. A continuación dibujaremos un rectángulo que cubrirá todo el lienzo, desde la esquina izquierda arriba ( x = 0, y = 0 ) hasta la esquina derecha abajo ( x
= canvas.width, y = canvas.height ). Utilizando el método createLinearGradient() crearemos el vector gradiente, estableciendo el punto de partida del vector ( x0 = 0, y0 =
0 ), y el punto donde este acaba ( x1 = canvas.width, y1 = 0 ). Este es un gradiente linealhorizontal, ya que el vector es paralelo al eje x.
Utilizaremos el método addColorStop() seis veces para crear algo parecido a un arco iris.
Al final utilizaremos este gradiente como estilo de relleno (ctx.fillStyle = grd;) para ( ctx.fill() ) nuestro rectángulo.
 if (ctx) {
 ctx.rect(0, 0, canvas.width, canvas.height);
 // crea un gradiente lineal horizontal
 var grd = ctx.createLinearGradient(0, 0, canvas.width, 0);
 grd.addColorStop(0,"black");
 grd.addColorStop("0.2","magenta");
 grd.addColorStop("0.4","blue");
 grd.addColorStop("0.6","green");
 grd.addColorStop("0.8","yellow");
 grd.addColorStop(1,"red");
 ctx.fillStyle = grd;
 ctx.fill();
 }
 }
 }
Gradiente radial



El gradiente radial ( o circular ) se puede utilizar como relleno para formas geométricas, líneas y texto dentro del<canvas>.
Crea un gradiente radial para utilizar en

el <canvas>
createRadialGradient() context.createRadialGradient(x0,y0,r0,x1,y1,r1); x e y son las coordenadas del centro de
los circulos
r es el radio de los circulos.
Especifica los colores y la posición

addColorStop() gradient.addColorStop(stop,color);
donde para el gradiente.
Determina o devuelve el color,

fillStyle context.fillStyle = color | gradiente | patrón; negro
gradiente o patrón del relleno.

Para definir los gradientes radiales con el método createRadialGradient() utilizaremos dos círculos imaginarios. El gradiente radial parte desde la circunferencia del primer
circulo, y se va hacia la circunferencia del segundo.
El método createRadialGradient(x0,y0,r0,x1,y1,r1) toma seis argumentos. Los tres primeros definen el primer circulo imaginario, x0 e y0 siendo las coordenadas del centro,
mientras que r0 representa el radio del circulo.
Los siguientes tres argumentos definen, de la misma manera, el segundo circulo.
El método addColorStop(stop,color) toma dos argumentos.
El primer argumento, stop, puede tomar valores desde 0.0 hasta 1.0, y representa una posición a lo largo del vector gradiente definido anteriormente con
método createLinearGradient(). Podemos utilizar el métodoaddColorStop() tantas veces como creamos necesario.
El segundo argumento representa el color, que puede tomar cualquier valor aceptado en el CSS ( nombres de colores, valores hex, rgb, rgba, hsl, hsla).
Veamos un ejemplo. A continuación dibujaremos un rectángulo que cubrirá todo el lienzo, desde la esquina izquierda arriba ( x = 0, y = 0 ) hasta la esquina derecha abajo ( x
= canvas.width, y = canvas.height ).
Utilizando el método createRadialGradient() crearemos un gadiente radial, que utilizaremos para rellenar este rectángulo.
Al final dibujaremos dos circulos que coincidan con los dos circulos imaginarios que hemos utilizado para definir el gradiente.
 if (ctx) {
 ctx.rect(0,0,canvas.width,canvas.height);

 var grd = ctx.createRadialGradient(80, 125, 25, 125, 125, 120);// x0, y0, r0, x1, y1, r1
 grd.addColorStop(0, "#8df");
 grd.addColorStop(1, "#04b");
 ctx.fill();

 ctx.strokeStyle = "#04b";
 ctx.arc(80, 125, 25, 0, 2 * Math.PI);// x0, y0, r0
 ctx.stroke();

 ctx.strokeStyle = "#8df";
 ctx.arc(125, 125, 120, 0, 2 * Math.PI);// x1, y1, r1
 ctx.stroke();
 }
 }
 }
Como crear patrones



El <canvas> nos lo pone fácil a la hora de crear y utilizar patrones ( patterns ). Un patrón puede ser creado a partir de una imagen, un video, o incluso de otro <canvas>, y
puede ser configurado para repetirse en todas las direcciones, o puede repetirse en una sola dirección, ( en x o en y ).
Incluso puede ser configurado para que no se repita.
Para crear patrones utilizaremos el método createPattern(img, dir). El primer argumento representa la imagen que utilizaremos para nuestro patrón. El segundo argumento
representa la dirección, y puede tomar los siguientes valores, que tienen el mismo significado que en el CSS: no-repeat, repeat, repeat-x y repeat-y.

fillStyle context.fillStyle=color|gradient|pattern; black

strokeStyle context.strokeStyle = color | gradiente | patrón; negro
context.createPattern(img,"repeat | repeat-x | repeat-y Repite una imagen en la dirección

createPattern()
| no-repeat"); especificada.
Dibuja y rellena un rectángulo desde

fillRect() context.fillRect(x,y,anchura,altura); black
un punto (x,y).
fillText() context.fillText(text,x,y,maxWidth); maxWidth opcional black;

Crear un patrón desde una imagen
Cuando creamos un patrón desde una imagen es mejor hacerlo cuando la imagen se haya cargado (img.onload), ya que las imágenes pueden cargarse lentamente, y probar
a crear un patrón desde una imagen inexistente, resultaría en error.
Para que esto no pase, escribiremos una función anónima que creará el patrón, y enlazaremos esta función como retrollamada ( callback ) al evento onload.
Veamos un ejemplo.
A continuación utilizaremos una pequeña imagen como patrón para nuestro <canvas>.
Crearemos el patrón ( pattern ) utilizando el método createPattern() y asignaremos su valor a la propiedadfillStyle(), para un relleno, o a la propiedad strokeStyle() para
dibular un borde.
 if (ctx) {
 // crear un patrón de relleno desde una imagen
 var patron = new Image();
 patron.onload = function() {
 ctx.fillStyle = ctx.createPattern(patron,"repeat");
 ctx.fillRect(50,50, canvas.width-100, canvas.height-100);
 // crear un borde utilizando un patrón
 ctx.strokeStyle = ctx.createPattern(patron,"repeat");
 ctx.strokeRect(10,10, canvas.width-20, canvas.height-20);
 }
 patron.src = "images/pattern.png";
 }
 }
 }
Crear un patrón desde otro canvas
También podemos crear patrones utilizando otro canvas en lugar de imagen.
Veamos un ejemplo.
Primero dibujaremos en un pequeño canvas (id="patron" width="10" height="15") una línea oblicua. Esta será la imagen que se repitirá para crear un patrón en el otro
canvas (id="lienzo1" width="200" height="160")
 <canvas id= "patron" width= "10" height= "15">Su navegador no soporta canvas :( </canvas>
 var canvasP = document.getElementById("patron");
 if (canvasP && canvasP.getContext) {
 var ctxP = canvasP.getContext("2d");
 if (ctxP) {
 // creamos el patrón.
 ctxP.lineWidth = 1;
 ctxP.strokeStyle = "#ccc";
 ctxP.beginPath();
 ctxP.moveTo(canvasP.width, 0);
 ctxP.lineTo(0, canvasP.height);
 ctxP.stroke();
 }
 }

 if (ctx1) {
 ctx1.save();
 // aplicamos el patrón
 ctx1.fillStyle = ctx1.createPattern(canvasP,"repeat");
 ctx1.fillRect(0,0, canvas1.width, canvas1.height);

 ctx1.restore();
 ctx1.font="18px Arial";
 ctx1.textAlign="center";
 ctx1.textBaseline="middle";
 ctx1.fillText("lienzo1", canvas1.width/2, canvas1.height/2);
 }
 }
 }
Aplicar sombras



Las sombras pueden ser aplicadas a todos los trazados que dibujamos en el <canvas>.
Hay cuatro propiedades que determinan las características de las sombras: shadowColor ( el color ), shadowBlur ( el desenfoque ), shadowOffsetX ( el desplazamiento
horizontal ) y shadowOffsetY ( el desplazamiento vertical ).
Las propiedades shadowOffsetX y shadowOffsetY pueden tomar valores tanto positivas ( la sombra cae hacia la derecha y abajo ) como negativas ( hacia la izquierda y
arriba ).
Determina (sets) o devuelve (returns) el color utilizado #000000;

shadowColor context.shadowColor=color;
para las sombras. transparente
Determina (sets) o devuelve (returns) el nivel de

shadowBlur context.shadowBlur=number; 0
desenfoque de las sombras.

shadowOffsetX context.shadowOffsetX=number; horizontal entre la sombra y la forma que la genera. El 0

shadowOffsetY context.shadowOffsetY=number; horizontal entre la sombra y la forma que la genera. El 0
Veamos un ejemplo. A continuación aplicaremos una sombra tanto a un rectángulo como a un texto.
 if (ctx) {
 ctx.shadowBlur=5;
 ctx.shadowOffsetX=2;
 ctx.shadowOffsetY=2;
 ctx.shadowColor="#333";
 // rectangulo
 ctx.fillStyle="white";
 ctx.fillRect(20,20,100,80);
 // texto
 ctx.font = "18px Verdana";
 ctx.textAlign = "center";
 ctx.fillText("Los gozos y las sombras", canvas.width/2, 150);
 }
 }
 }
Transparencia (globalAlpha)



La propiedad globalAlpha determina ( sets ) o devuelve ( returns ) el valor alfa o la opacidad real del dibujo.
Puede tomar valores entre 0.0 ( totalmente transparente ) y 1.0 ( totalmente opaco ).
context.globalAlpha = Determina (sets) o devuelve (returns) el valor alfa o la transparencia

globalAlpha 1.0
numero actual del dibujo.
Un ejemplo fácil
A continuación superpondremos tres rectángulos que tendrán una opacidad alpha de 75%. ( context.globalAlpha = .75 )
 if (ctx) {
ctx.globalAlpha=0.75;
ctx.fillStyle="#f00";
ctx.fillRect(60,20,75,50);
ctx.fillStyle="#0f0";
ctx.fillStyle="#00f";
 }
 }
 }
Escribiendo en el canvas



Para dibujar texto, utilizaremos una serie de métodos() y propiedades de <canvas>.

fillStyle context.fillStyle = color | gradiente | patrón; negro
context.strokeStyle = color | gradiente | Determina (sets) o devuelve (returns) el color,

strokeStyle negro
Determina (sets) o devuelve (returns) la grosor

de la línea.
Determina (sets) o devuelve (returns) las

context.font = "italic small-caps bold 12px 10px sans-
font propiedades del texto ( font-style, font-
arial"; serif
variant, font-weight, font-size, font-family )
context.textAlign = "center | end | left | right

textAlign Especifica el tipo de alineación del texto. start
| start";
textBaseline "alphabetic | top | hanging | middle | alphabetic
ideographic | bottom";
Dibuja texto relleno con un color, gradiente o

fillText() context.fillText(text,x,y,maxWidth); patrón previamente definido. black
Dibuja texto bordeado con un color, gradiente

strokeText() context.strokeText(text,x,y,maxWidth); o patrón previamente definido. black
Devuelve un objeto que contiene la anchura

del texto especificado entre paréntesis.
font (utilizar fuentes)
Determina las propiedades del texto, las mismas que utilizamos en CSS, y en este mismo orden: font-style, font-variant, font-weight, font-size y font-family. Podemos
utilizar todas estas propiedades o solo algunas de ellas.
Ejemplos:
context.font="2em Verdana";
context.font="italic small-caps bold 12px arial";
context.font="italic bold 12pt Times New Roman, serif ";
strokeText (bordeado de texto) y fillText (relleno de texto)
Canvas transforma el texto en un trazado, y exactamente como con los demás trazados podemos utilizarlineWidth, strokeStyle y fillStyle, además de métodos() específicos
como fillText(), para rellenar el texto (de color, gradiente o patrón ), y strokeText(), para dibujar un borde alrededor del texto
 if (ctx) {
var centerX = canvas.width/2;
ctx.textAlign="center";
ctx.font="30pt Verdana";
ctx.fillText("fillText",centerX,60);
ctx.font="25pt Verdana";
ctx.strokeStyle="green";
ctx.lineWidth = 2;
ctx.strokeText("strokeText",centerX,120);
 }
 }
 }
Más información acerca del soporte de canvas en los navegadores
Alineación horizontal



La propiedad textAlign especifica el tipo de alineación del texto. Puede tomar una de las siguientes valores: center( centrar texto ), left ( alinear texto a la
izquierda), right ( alinear texto a la derecha ), start y end.
En idiomas como el castellano, con un sistema de escritura de izquierda a derecha, start == left y end == right, mientras que en idiomas con sistemas de escritura de
derecha a izquierda, como el hebreo, pasa todo lo contrario: start es lo mismo que right y end es lo mismo que left.

arial"; serif

| start";



 if (ctx) {
 var centerX = canvas.width/2;
 // crea una linea roja vertical en el centro del canvas
ctx.strokeStyle="red";
ctx.moveTo(centerX,20);
ctx.lineTo(centerX,170);
ctx.stroke();
ctx.font="12px Arial";
// La propiedad textAlign tomando varias valores:
ctx.textAlign="left";
ctx.fillText("textAlign=left",centerX,60);
ctx.textAlign="center";
ctx.fillText("textAlign=center",centerX,80);
ctx.textAlign="right";
ctx.fillText("textAlign=right",centerX,100);
ctx.textAlign="start";
ctx.fillText("textAlign=start",centerX,120);
ctx.textAlign="end";
ctx.fillText("textAlign=end",centerX,140);
 }
 }
 }
Alineación horizontal



La propiedad textAlign especifica el tipo de alineación del texto. Puede tomar una de las siguientes valores: center( centrar texto ), left ( alinear texto a la
izquierda), right ( alinear texto a la derecha ), start y end.
En idiomas como el castellano, con un sistema de escritura de izquierda a derecha, start == left y end == right, mientras que en idiomas con sistemas de escritura de
derecha a izquierda, como el hebreo, pasa todo lo contrario: start es lo mismo que right y end es lo mismo que left.

arial"; serif

| start";
fillText() context.fillText(text,x,y,maxWidth); Dibuja texto relleno con un color, gradiente o black

patrón previamente definido.



 if (ctx) {
 var centerX = canvas.width/2;
 // crea una linea roja vertical en el centro del canvas
 ctx.strokeStyle="red";
 ctx.moveTo(centerX,20);
 ctx.lineTo(centerX,170);
 ctx.stroke();

 ctx.font="12px Arial";
 // La propiedad textAlign tomando varias valores:
 ctx.textAlign="left";
 ctx.fillText("textAlign=left",centerX,60);
 ctx.textAlign="center";
 ctx.fillText("textAlign=center",centerX,80);
 ctx.textAlign="right";
 ctx.fillText("textAlign=right",centerX,100);
 ctx.textAlign="start";
 ctx.fillText("textAlign=start",centerX,120);
 ctx.textAlign="end";
 ctx.fillText("textAlign=end",centerX,140);
 }
 }
 }
Medir texto



El método measureText() devuelve un objeto que contiene la anchura del texto especificado entre paréntesis.
En el siguiente ejemplo utilizaremos el método measureText() para calcular el tamaño de fuente para que el texto escogido quepa en el <canvas>

arial"; serif

| start";



<canvas width= "250" height= "120" id= "lienzo">Su navegador no soporta canvas :( </canvas>
<form>
<div id= "form">
<select id= "citas">
<option> Las tres morillas.</option>
<option> Tres morillas tan garridas.</option>
<option> Tres moricas tan lozanas iban a coger manzanas.</option>
</select><br>
<button type= "button" class= "tiny" id= "boton">Enviar!</button>
</div></form>
var boton = document.getElementById("boton");
boton.onclick = function() {
if (ctx) {
// limpiamos el canvas
ctx.clearRect(0,0,canvas.width,canvas.height);
// queCita definida al final del script
var texto = queCita();
var tamanoTexto = 30;
ctx.font = tamanoTexto+"px Georgia";
// medimos la anchura del texto
var anchuraTexto = ctx.measureText(texto).width;
//mientras que la anchura del texto > anchura del lienzo - 20px
while( anchuraTexto > canvas.width-20 ){
// reducimos el tamaño del texto con 1 px
tamanoTexto--;
ctx.font = tamanoTexto+"px Georgia";
anchuraTexto = ctx.measureText(texto).width;
}
//ahora que el texto tiene la anchura adecuada
// centramos el texto
ctx.textAlign = "center";
ctx.textBaseline = "middle";
// y publicamos el texto
ctx.fillText(texto, canvas.width/2, canvas.height/2-20);
ctx.font = "15px Georgia";
ctx.fillText("tama\361o texto: "+ tamanoTexto, canvas.width/2, canvas.height/2 + 20);
}
}
}
function queCita(){
var citas = document.getElementById("citas");
var index = citas.selectedIndex;
var texto = citas[index].text;
return texto
}
}
Enviar!
Escoge tu cita favorita y haz clic en "Enviar!"
Cambio de línea



En JavaScript el metacarácter \n se utiliza para insertar un salto de línea.
 alert("esto inserta un\nsalto de l\355nea")
La mala noticia es que esto no funciona en el <canvas> de html5. La buena noticia es que podemos escribir una función para insertar saltos de línea. Veamos como queda.
Más información acerca del uso de símbolos en javaScript.
if (ctx) {
var maxWidth = 190;
var padding = 30;
var maxWidth = canvas.width - 2*padding;
var texto = "El veloz murci\351lago hind\372 com\355a feliz cardillo y kiwi. La cig\374e\361a tocaba el saxof\363n detr\341s del palenque de paja.";
var x = padding;
var y = 50;
var alturaDeLinea = 25;
ctx.font = "12px Arial";
ctx.fillStyle = "#333";
// llama la función ajusteDeTexto
ajusteDeTexto(texto, x, y, maxWidth, alturaDeLinea);
}
}
function ajusteDeTexto(texto, x, y, maxWidth, alturaDeLinea){

// crea el array de las palabras del texto
var palabrasRy = texto.split(" ");
// inicia la variable var lineaDeTexto
var lineaDeTexto = "";
// un bucle for recorre todas las palabras
for(var i = 0; i < palabrasRy.length; i++) {
var testTexto = lineaDeTexto + palabrasRy[i] + " ";
// calcula la anchura del texto textWidth
var textWidth = ctx.measureText(testTexto).width;
// si textWidth > maxWidth
if (textWidth > maxWidth && i > 0) {
// escribe en el canvas la lineaDeTexto
ctx.fillText(lineaDeTexto, x, y);
// inicia otra lineaDeTexto
lineaDeTexto = palabrasRy[i]+ " " ;
// incrementa el valor de la variable y
//donde empieza la nueva lineaDeTexto
y += alturaDeLinea;
}else {// de lo contrario, si textWidth <= maxWidth
lineaDeTexto = testTexto;
}
}// acaba el bucle for
// escribe en el canvas la última lineaDeTexto
ctx.fillText(lineaDeTexto, x, y);
}
}
Texto con reflejo




Para crear texto con reflejo utilizaremos otros dos métodos de <canvas> translate() y scale(). También aplicaremos transparencia con globalAlpha.

arial"; serif

| start";



 if (ctx) {
 var text = "Las Tres Morillas";
 ctx.font = "20pt Comic Sans MS";
 ctx.textAlign = "center";
 ctx.fillStyle = "blue";
 // dibuja el texto
 ctx.fillText(text,canvas.width / 2, (canvas.height/2)-2);
 // translada el contexto en el centro del canvas
 ctx.translate(canvas.width / 2, (canvas.height/2)+2);
 // voltea horizontalmente el contexto
 // el segundo parámetro de scale es un número negativo
 ctx.scale(1, -1);
 // transparencia
 ctx.globalAlpha = 0.1;
 // dibuja de nuevo el texto
 ctx.fillText(text,0,0);
 }
 }
 }
Transformaciones



Las transformaciones son muy importantes a la hora de manipular los trazados . El <canvas> de HTML5 viene de fabrica con tres tipos de
transformaciones: tanslate(), scale() y rotate(), además de otros dos métodos que nos permiten hacer transformaciones a medida: transform() y setTransform().
Importante: las transformaciones son aditivas, o sea: cada transformación se sumará a la transformación anterior.
translate() context.translate(x,y); Mueve el origen (0,0) del <canvas> en un punto dado(x,y). 0,0
Gira los trazados posteriores un ángulo dado (en radianes).

rotate() context.rotate(ángulo); El punto alrededor del cual gira coincide con el origen 0
del<canvas> (0,0)

scale() context.scale(h,v); 1,1
Valores que pueden tomar los parametros del método:
1=100%, 0.5=50%, 2=200%, etc...
Cambia los trazados posteriores, cambiando la matriz de

transform() context.transform(a,b,c,d,e,f); 1,0,0,0,1,0
estos.

setTransform() context.setTransform(a,b,c,d,e,f); 1,0,0,0,1,0
Trasladar con translate()
El método translate() mueve el origen (0,0) del <canvas> en un punto dado. A continuación dibujaremos un rectángulo con fillRect(). Situaremos el rectángulo en el origen
del <canvas>. Aplicaremos el métodotranslate() y volveremos a dibujar otro rectángulo igual. Veamos que pasa.
if (ctx) {
ctx.translate(75, 100);
ctx.fillStyle = "red";
}
}
}
Girar con rotate()
El método rotate() gira los trazados posteriores con un ángulo dado (en radianes). El punto alrededor del cual gira coincide con el origen del contexto (0,0). Si queremos que
un trazado gire alrededor de otro punto, tendremos que trasladar el origen del contexto en este punto antes de girar.
A continuación utilizaremos un bucle for ( for loop ) para dibujar una série de rectángulos. Después de cada rectángulo giraremos el contexto 20° (Math.PI/9) en el sentido
del reloj.
Como que las transformaciones son cumulativas, y los rectángulos giran alrededor del origen del contexto, al final tendremos algo parecido a un abanico de rectángulos.
 var ctx1 = canvas.getContext("2d");
 if (ctx1) {
var cw = canvas.width;
var ch = canvas.height;
var w = 100;
var h = 15;
for( var i = 0; i<5; i++ ){
ctx1.fillStyle = "blue";
//dibujamos un rectangulo
ctx1.fillRect((cw-w)/2, 0, w, h);
// giramos 20 grados
ctx1.rotate(Math.PI/9);
}
 }
 }
 }
Cambiar el centro de rotación
Si queremos que un trazado gire alrededor de otro punto (que no sea el la esquina izquierda arriba del <canvas>) tendremos que trasladar el origen del contexto en el
punto deseado.
A continuación trasladamos el origen en el centro del canvas y utilizaremos un bucle for ( for loop ) para dibujar una série de cuadrados. Haremos que los cuadrados sean
transparentes (ctx.globalAlpha=0.4) y azules. Después de dibujar cada cuadrado giraremos el contexto 60º (Math.PI/3) en el sentido del reloj. Veamos como queda.
 if (ctx2) {
 var cw = canvas2.width;
 var ch = canvas2.height;
 var w = 50;
 var h = 50;
 ctx2.fillStyle = "blue";
 ctx2.globalAlpha=0.4;
 // trasladamos el origen en el centro del canvas
 ctx2.translate(cw/2, ch/2);

 for( var i = 0; i<6; i++){
 // giramos 60 grados
 ctx2.rotate(Math.PI/3);
 //dibujamos un nuevo rectangulo
 ctx2.fillRect(-w,-h,w,h);
 ctx2.strokeRect(-w,-h,w,h);
 }
 }
 }
 }
Redimensionar con scale()
El método scale(h,v) reduce o amplía a escala el dibujo actual, donde h representa la escala horizontal, y v la escala vertical. Por ejemplo: si h = 0.5 la altura se verá reducida
a un 50%. Si por el contrario v = 2, la anchura aumentara a 200% de su valor inicial. Veamos un ejemplo.
 if (ctx3) {
 ctx3.fillStyle = "#f00";
 ctx3.lineWidth=5;
 // dibuja el rectángulo pequeño
 ctx3.strokeRect(12,15,25,15);
 ctx3.fillRect(12,15,25,15);
 // redimensiona
 ctx3.scale(5,2.5);
 // el mismo código que dibujó el rectángulo pequeño
 // dibuja ahora el rectángulo grande
 ctx3.strokeRect(12,15,25,15);
 ctx3.fillRect(12,15,25,15);
 }
 }
 }
Transformaciones a medida



Además de mover con tanslate(), redimensionar con scale() y girar con rotate(), el <canvas> de HTML5 dispone de dos métodos que nos permiten hacer transformaciones a
medida: transform() y setTransform().
translate() context.translate(x,y); Mueve el origen (0,0) del <canvas> en un punto dado(x,y). 0,0
Gira los trazados posteriores un ángulo dado (en radianes).

rotate() context.rotate(ángulo); El punto alrededor del cual gira coincide con el origen 0
del<canvas> (0,0)

scale() context.scale(h,v); 1,1
Valores que pueden tomar los parametros del método:
1=100%, 0.5=50%, 2=200%, etc...
Cambia los trazados posteriores, cambiando la matriz de

transform() context.transform(a,b,c,d,e,f); 1,0,0,0,1,0
estos.

setTransform() context.setTransform(a,b,c,d,e,f); 1,0,0,0,1,0
Cada objeto en el <canvas> tiene una matriz de transformación. o
La matriz inicial (sin transformación alguna) tiene este aspecto:

El método transform() substituye la matriz actual del objeto, por otra, y toma 6 argumentos (a,b,c,d,e,f). Los 6 argumentos corresponden a los 6 primeros elementos de la
matriz y representan:
a rx Redimensiona horizontalmente el dibujo. ejemplo
b sy Sesga verticalmente el dibujo ejemplo
c sx Sesga horizontalmente el dibujo ejemplo
d ry Redimensiona verticalmente el dibujo ejemplo
e mx Mueve horizontalmente el dibujo ejemplo

f my Mueve verticalmente el dibujo ejemplo
Transformar con transform()
Empezaremos dibujando un cuadrado: ctx.fillRect(0,0,50,50) azul (#0000FF) que dejaremos como testigo en la esquina superior izquierda. A continuación cambiaremos el
color, transformaremos el contexto del <canvas> conctx.transform(.7,.7,-.7,.7,125,10) y dibujaremos de nuevo el mismo rectángulo.
Repetiremos esta operación dos veces más, y como que las transformaciones en el canvas son cumulativas, cada vez obtendremos algo diferente.
if (ctx) {
ctx.fillStyle = "#0000FF";
ctx.fillStyle = "#1E90FF";
ctx.transform(.7, .7, -.7, .7, 125,10);
ctx.fillStyle = "#FF0000";
ctx.transform(.7, .7, -.7, .7, 135,10);
ctx.fillStyle = "#FF9900";
ctx.transform(.7, .7, -.7, .7, 145,10);
}
}
}
Transformar con setTransform()
A diferencia de transform(), el método setTransform() no es cumulativo, ya que vuelve a poner a cero ( set ) el contexto del <canvas>.
A continuación aprovecharemos el código del ejemplo anterior con la única diferencia que utilizaremos el métodosetTransform() en lugar de transform().
Veamos la diferencia.
 if (ctx1) {
 ctx1.fillStyle = "#0000FF";
 ctx1.fillRect(0,0,50,50);
 ctx1.fillStyle = "#1E90FF";
 ctx1.setTransform(.7, .7, -.7, .7, 125,10);
 ctx1.fillStyle = "#FF0000";
 ctx1.fillStyle = "#FF9900";
 }
 }
 }
Trabajar con imágenes




También podemos utilizar imágenes en el canvas. Lo podemos hacer utilizando las reglas del CSS para establecer una imagen como fondo del canvas ( canvas{ background-
image:url(img.png);} ) , o lo podemos hacer de manera dinámica utilizando métodos() y propiedades especificas.

respectivamente.

recortada.
resultante.
En este segundo supuesto, podemos utilizar:
 - una imagen desde archivo.
 - una imagen ya existente en la página.
 - una imagen dibujada en otro canvas.
También podemos redimensionar, recortar o reposicionar esta imagen. Veamos como y vayamos por partes.
Imagen desde archivo.
Cuando queremos utilizar una imagen desde un archivo, hay que llamar el método drawImage() solo cuando la imagen se haya cargado (img.onload ), ya que las imágenes
pueden cargarse lentamente, y probar a utilizar una imagen inexistente, resultaría en error.
Para que esto no pase, escribiremos una función anónima que llamará drawImage(), y enlazaremos esta función como retrollamada ( callback ) al evento onload.
A continuación utilizaremos em método drawImage(img,x,y) en su forma más sencilla: con solo tres argumentos.
 if (ctx) {
 }
 }
 }
 }
Imagen ya existente en la página
( reposicionar y redimensionar una imagen )
Si la imagen ya existe en la página, podemos almacenar su valor en una variable ( mediantedocument.getElementById(), por ejemplo ), y podemos utilizar esta variable con
el método drawImage() para dibujar la imagen en el <canvas>.
Como ya hemos adelantado, podemos reposicionar y redimensionar la imagen.
En el siguiente ejemplo reduciremos tanto la anchura como la altura de la imagen a la mitad , y la posicionaremos en el centro del <canvas>.
Para esto utilizaremos el método drawImage(img,x,y,w,h) junto con cinco argumentos. El método dibujará una imagen (img) en el canvas desde el punto (x,y),
donde w y h son el ancho y el alto de la imagen, respectivamente.
 <img id= "img" src= "images/enfeinada250.jpg" width= "250" height= "232" alt= "enfeinada" />
 if (ctx1) {
 var img1 = document.getElementById("img");
 var x = ( canvas1.width - (img1.width/2) ) /2;
 var y = ( canvas1.height - (img1.height/2) ) /2;
 var w = img1.width/2;
 var h = img1.height/2;
 ctx1.drawImage( img1, x, y ,w, h );
 }
 }
 }
Imagen desde otro canvas

( recortar reposicionar y redimensionar una imagen )
También podemos utilizar una imagen previamente dibujada en otro <canvas>. En el siguiente ejemplo utilizaremos la imagen de <canvas id="lienzo2"> que recortaremos y
redimensionaremos antes de colocarla en el <canvas id="lienzo3">.
Para esto utilizaremos el método drawImage(img,sx,sy,sw,sh,x,y,w,h) junto con nueve atributos.
Este método recorta la imagen (img) empezando desde un punto (sx, sy), sw y sh siendo el ancho y el alto de la zona recortada.
A continuación dibujaremos esta imagen en el otro canvas desde el punto (x, y), donde w y h son el ancho y el alto de la imagen resultante.
 // de este canvas copiamos la imagen
 if (ctx2) {
 ctx2.drawImage( img2,0,0 );
 }
 }
 // a este canvas pegamos la imagen recortada
 if (ctx3) {
 var img3 = canvas2;

 var sx = 50;
 var sy = 40;
 var sw = 140;
 var sh = 140;

 var x = 75;
 var y = 79;
 var w = 100;
 var h = 100;

 ctx3.drawImage( img3,sx,sy,sw,sh, x,y,w,h );
 }
 }
 }
Trabajar con imágenes




También podemos utilizar imágenes en el canvas. Lo podemos hacer utilizando las reglas del CSS para establecer una imagen como fondo del canvas ( canvas{ background-
image:url(img.png);} ) , o lo podemos hacer de manera dinámica utilizando métodos() y propiedades especificas.

respectivamente.

recortada.
resultante.
En este segundo supuesto, podemos utilizar:
 - una imagen desde archivo.
 - una imagen ya existente en la página.
 - una imagen dibujada en otro canvas.
También podemos redimensionar, recortar o reposicionar esta imagen. Veamos como y vayamos por partes.
Imagen desde archivo.
Cuando queremos utilizar una imagen desde un archivo, hay que llamar el método drawImage() solo cuando la imagen se haya cargado (img.onload ), ya que las imágenes
pueden cargarse lentamente, y probar a utilizar una imagen inexistente, resultaría en error.
Para que esto no pase, escribiremos una función anónima que llamará drawImage(), y enlazaremos esta función como retrollamada ( callback ) al evento onload.
A continuación utilizaremos em método drawImage(img,x,y) en su forma más sencilla: con solo tres argumentos.
 if (ctx) {
img.onload = function() {
ctx.drawImage(this, 0, 0);
 }
 }
 }
 }
Imagen ya existente en la página
( reposicionar y redimensionar una imagen )
Si la imagen ya existe en la página, podemos almacenar su valor en una variable ( mediantedocument.getElementById(), por ejemplo ), y podemos utilizar esta variable con
el método drawImage() para dibujar la imagen en el <canvas>.
Como ya hemos adelantado, podemos reposicionar y redimensionar la imagen.
En el siguiente ejemplo reduciremos tanto la anchura como la altura de la imagen a la mitad , y la posicionaremos en el centro del <canvas>.
Para esto utilizaremos el método drawImage(img,x,y,w,h) junto con cinco argumentos. El método dibujará una imagen (img) en el canvas desde el punto (x,y),
donde w y h son el ancho y el alto de la imagen, respectivamente.
 <img id= "img" src= "images/enfeinada250.jpg" width= "250" height= "232" alt= "enfeinada" />
 if (ctx1) {
 var x = ( canvas1.width - (img1.width/2) ) /2;
 var y = ( canvas1.height - (img1.height/2) ) /2;
 var w = img1.width/2;
 var h = img1.height/2;
 ctx1.drawImage( img1, x, y ,w, h );
 }
 }
 }
Imagen desde otro canvas

( recortar reposicionar y redimensionar una imagen )
También podemos utilizar una imagen previamente dibujada en otro <canvas>. En el siguiente ejemplo utilizaremos la imagen de <canvas id="lienzo2"> que recortaremos y
redimensionaremos antes de colocarla en el <canvas id="lienzo3">.
Para esto utilizaremos el método drawImage(img,sx,sy,sw,sh,x,y,w,h) junto con nueve atributos.
Este método recorta la imagen (img) empezando desde un punto (sx, sy), sw y sh siendo el ancho y el alto de la zona recortada.
A continuación dibujaremos esta imagen en el otro canvas desde el punto (x, y), donde w y h son el ancho y el alto de la imagen resultante.
 // de este canvas copiamos la imagen
 if (ctx2) {
 ctx2.drawImage( img2,0,0 );
 }
 }
 // a este canvas pegamos la imagen recortada
 if (ctx3) {
 var img3 = canvas2;

 var sx = 50;
 var sy = 40;
 var sw = 140;
 var sh = 140;

 var x = 75;
 var y = 79;
 var w = 100;
 var h = 100;

 ctx3.drawImage( img3,sx,sy,sw,sh, x,y,w,h );
 }
 }
 }
Manipular imágenes



El <canvas> nos permite modificar, uno por uno, los píxeles de una imagen. Para esto tenemos a nuestra disposición tres propiedades y tres métodos() de <canvas>
Importante: si queremos experimentar manipulando imágenes en el <canvas> tenemos que hacerlo en un sitio web de verdad, como por ejemplo locahost.
Devuelve el ancho del objeto ImageData,

width imgData.width
en píxeles
Devuelve la altura del objeto ImageData,

height imgData.height
en píxeles
Devuelve un objeto conteniendo todos los

data imageData.data
datos del objeto ImageData.

createImageData() context.createImageData( ancho, alto ); blanco. Toma dos argumentos: la anchura y
la altura del objeto creado


especificado.

canvas
Un poco de teoría
Los píxeles de una imagen "en crudo" tienen una "anchura" de 4 bytes, uno por cada componente R G B A. (Red (rojo), Green (verde), Blue (azul) y Alpha). Accediendo uno
por uno los pixeles de una imagen podemos modificar estos componentes de color, y por tanto manipular el aspecto de las imágenes en el<canvas>.
Ojo: por razones de seguridad el <script> que manipulará estos bytes tiene que provenir de la misma página web. De otra manera el acceso al <script> será denegado y el
navegador levantará una excepción de seguridad.
Un ejemplo fácil
A continuación dibujaremos un cuadrado. Ya lo se, sería mucho más fácil dibujarlo con fillRect(), pero es solo para demonstrar como podemos dibujar una imagen sencilla
partiendo prácticamente desde cero.
 1. El método createImageData(anchura , altura) crea un nuevo objeto ImageData en blanco, de anchura y altura dadas.
 2. En el siguiente paso iremos de pixel en pixel modificando uno por uno el valor de los componentes RGBA.
Como ya hemos visto cada pixel tiene una "anchura" de 4 bytes, donde el primer byte representa el rojo, el segundo representa el verde, el tercero el azul y el
cuarto es el componente alpha o el grado de transparencia.
Siendo bytes pueden tomar valores entre 0 y 255.
En el siguiente ejemplo manipularemos cada pixel para que:
o el rojo = 255; (100%)

o el verde = 0;(ausente)
o el azul = 0; (ausente)
o alpha = 255; (totalmente opaco)
 3. Después de manipular los pixeles volvemos a colocar la imagen en el <canvas>con putImageData().
El método putImageData() toma (en este caso) tres argumentos: la imagen manipulada y las coordenadas x e y de donde poner la imagen en el <canvas>
 if (ctx) {
 // 1. crea un objeto ImageData en blanco
 var imgData=ctx.createImageData(100,100);
 // 2. para cada pixel modifica el valor de los componentes RGBA
 for (var i = 0; i < imgData.data.length; i+= 4)
 {
 imgData.data[i+0]=255; // rojo = 100%
 imgData.data[i+1]=0; // verde - ausente
 imgData.data[i+2]=0; // azul - ausente
 imgData.data[i+3]=255; // alpha - opaco
 }
 // 3. coloca la nueva imagen en el canvas
 ctx.putImageData(imgData,75,10);
 }
 }
 }
El negativo de una imagen




A continuación veremos un ejemplo práctico de como manipular una imagen. Para ser más exactos veremos como poner una imagen en negativo en el <canvas>.
Importante: si queremos experimentar manipulando imágenes en el <canvas> tenemos que hacerlo en un sitio web de verdad, como por ejemplo locahost

width imgData.width
en píxeles
height imgData.height Devuelve la altura del objeto ImageData,

en píxeles

data imageData.data



especificado.

putImageData() ImageData especificado) de nuevo en la
lona
Colores complementarios con rgb.
Llamamos colores complementarios los colores diametralmente opuestos en el circulo cromático.
Para encontrar el color complementario de un color dado en rgb, empezaremos separando el color en sus componentes cromáticos.
Tomemos por ejemplo este verde: rgb(106, 177, 80). Sus componentes cromáticos son:
r (rojo) = 106
g (verde) = 177
b (azul) = 80;
A continuación calcularemos el valor de cada componente cromático del color complementario (diametralmente opuesto), teniendo en cuenta que el valor máximo que
pueden tomar estos componentes es 255.
r (rojo) = 255 – 106 = 149
g (verde) = 255 - 177 = 78
b (azul) = 255 – 80 = 175
El código rgb del color complementario es : rgb(149, 78, 175).
Invertir los colores de una imagen
Para sacar el negativo de una imagen en colores, hay que acceder uno por uno cada pixel de esta imagen y cambiar el color del pixel por el color complementario, y esto ya
sabemos como hacerlo.
Esta vez no manipularemos toda la imagen sino una zona. El método putImageData() toma en este caso siete argumentos:
la imagen manipulada imgData,
las coordenadas x e y de donde poner la imagen en el <canvas>
las coordenadas dirtyX y dirtyY de donde empezar a manipular la imagen
la anchura dirtyWidth y la altura dirtyHeight del rectángulo manipulado.
 <img id= "alFaro" src= "images/enfeinada250.jpg" alt= "al faro" />
 if (ctx) {
 var srcImg = document.getElementById("alFaro");
 ctx.drawImage(srcImg, 0, 0, ctx.canvas.width, ctx.canvas.height);
 var imgData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
 var pixels = imgData.data;
 for (var i = 0; i < pixels.length * 4; i += 4) {
 pixels[ i ] = 255 - pixels[ i ]; // rojo
 pixels[ i + 1 ] = 255 - pixels[ i + 1 ]; // verde
 pixels[ i + 2 ] = 255 - pixels[ i + 2] ; // azul
 }
 ctx.putImageData( imgData, 0, 0, 25, 25, 200, 182 );
 }
 }
 }
mágenes en blanco y negro



A continuación veremos otro ejemplo práctico de como manipular una imagen. Para ser más exactos veremos como convertir una imagen a blanco y negro.

width imgData.width
en píxeles

en píxeles

data imageData.data



especificado.

canvas.
Convertir una imagen a blanco y negro
Para convertir a blanco y negro una imagen en colores, hay que manipular uno por uno cada pixel de esta imagen y cambiar el color del pixel por el valor calculado de
la luminosidad (brightness) del mismo. Para calcular la luminosidad de cada pixel utilizaremos una fórmula sacada del libro Head First Html5 Programming
var luminosidad =( 3 * r + 4 * g + b) >>> 3
Pero hay muchas y variadas fórmulas circulando libremente por internet.
 <img id= "alFaro" src= "images/al_faro.jpg" alt= "al faro" />
 if (ctx) {
 //calcula la luminosidad percibida para este pixel
 var luminosidad =( 3 * pixels[i] + 4 * pixels[i + 1] + pixels[i + 2] ) >>> 3;
 pixels[i] = luminosidad;// rojo
 pixels[i + 1] = luminosidad;// verde
 pixels[i + 2] = luminosidad;// azul
 }
 ctx.putImageData(imgData, 0, 0);
 }
 }
 }
Imágenes en sepia



A continuación veremos otro ejemplo práctico de como manipular una imagen. Para ser más exactos veremos como convertir una imagen a tonos de sepia.

width imgData.width
en píxeles

en píxeles

data imageData.data



especificado.

putImageData() ImageData especificado) de nuevo en la
lona
Convertir una imagen tonos de sepia, es muy parecido a lo que acabamos de hacer para convertir una imagen a blanco y negro. Una vez calculada la luminosidad
modificaremos ligeramente el valor de cada componente de color para obtener los tonos de sepia.
No hay que olvidar que el valor máximo de cada componente cromático es de 255. Para no pasarnos de 255, utilizaremos Math.min para escoger el mínimo entre el valor
calculado del componente cromático y 255.
 <img id= "alFaro" src= "images/al_faro.jpg" alt= "al faro" />
 if (ctx) {
 //calcula la luminosidad percibida para este pixel
 var luminosidad = .3 * pixels[i] + .6 * pixels[i + 1] + .1 * pixels[i + 2];
 pixels[i] = Math.min( luminosidad+40, 255) ;// rojo
 pixels[i + 1] = Math.min( luminosidad+15, 255 ); // verde
 pixels[i + 2] = luminosidad; // azul
 }
 ctx.putImageData( imgData, 0, 0 );
 }
 }
 }
Modos de fusión



Nota: Los los modos de fusión en <canvas> son una tecnología experimental. Por favor consulte el soporte en los navegadores para esta propiedad.
En imágenes digitales los modos de fusión ( blend modes ) son utilizados para determinar como se fusionan dos capas. Para cada pixel, el color del elemento ( el color de
origen o source color ) se combina o se fusiona ( is blended) con el color del fondo ( the backdrop ) para crear un nuevo color; y como que el color de cada pixel tiene un
valor numérico, hay un gran número de posibles combinaciones.
El modo de fusión por defecto en la mayoría de aplicaciones, simplemente esconde la capa inferior ( de destino ).
En Photoshop, por ejemplo, para fusionar capas podemos utilizar Layer > Layer Style > Blending Options o en español: Capa > Estilos de Capa > Opciones de fusión.
En CSS3 podemos utilizar background-blend-mode para combinar dos imágenes de fondo, o una imagen y un color.
Un ejemplo de exclusión
En <canvas> utilizamos la propiedad globalCompositeOperation con este propósito. Por coherencia los valores que puede tomar globalCompositeOperation son iguales a
las que utilizamos en CSS:
"color", "color-burn", "color-dodge", "darken", "difference", "exclusion", "hard-light", "hue", "lighten", "luminosity", "multiply", "overlay", "saturation", "screen", "soft-
light"
En el siguiente ejemplo utilizamos el modo de fusión de tipo "exclusion".
context.globalCompositeOperation = "exclusion";
El modo de fusión "exclusion" resta el valor del color más oscuro del valor del color más claro. Por ejemplo una fusión con una capa blanca produce el negativo de la
imagen. Y una fusión con una capa negra deja la imagen sin cambiar.
Para que haya fusión necesitamos dos imágenes – lógico. La primera imagen es un JPEG que dibujamos en el canvas utilizando el método drawImage()
// crea una nueva imagen
var img=new Image();
// establece el valor del atributo src de la nueva imagen
img.src = "images/enfeinada240.jpg";
// cuando la imagen se ha cargado
img.onload = function() {
// dibuja la imagen en el canvas
context.drawImage(this, 0, 0);
}
La segunda imagen es un rectángulo que rellenamos con un gradiente lineal:
// define el tectángulo a dibujar
context.rect(0, 0, canvas.width, canvas.height);
// crea un gradiente lineal vertical
var grd = context.createLinearGradient(0, 0, 0, canvas.height);
grd.addColorStop(0,"#F06");
grd.addColorStop(1,"black");
// define el relleno del rectángulo
context.fillStyle = grd;
// dibuja el rectángulo
context.fill();
 <canvas id= "lienzo" width= "240" height= "240">Por favor... Actualiza tu navegador.</canvas>
 var context = canvas.getContext("2d");
 if (context) {console.log("habemus context")
 // utilizamos el modo de fusión de tipo "exclusion"
 context.globalCompositeOperation = "exclusion";
 // la primera imagen
 img.onload = function() {console.log("loaded");
 context.drawImage(this, 0, 0);
 }
 //la segunda imagen
 context.rect(0, 0, canvas.width, canvas.height);
 // crea un gradiente lineal vertical
 var grd = context.createLinearGradient(0, 0, 0, canvas.height);
 grd.addColorStop(0,"#F06");
 context.fillStyle = grd;
 context.fill();

 }
 }
 }
Como ya hemos dicho el <canvas> cuenta con varios métodos de fusión, tantos como en el CSS.
"color", "color-burn", "color-dodge", "darken", "difference", "exclusion", "hard-light", "hue", "lighten", "luminosity", "multiply", "overlay", "saturation", "screen", "soft-
light"
Veamos como quedan.
color
color-burn
color-dodge
darken
difference
exclusion
hard-light
hue
lighten
luminosity
multiply
overlay
saturation
screen
soft-light
 window.onload = function() {var body = document.querySelector(".demo")
 var gCO = Array("multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-
light", "difference", "exclusion", "hue", "saturation", "color", "luminosity");
 //ordena alfabeticamente el array
 gCO.sort()

 for( var i = 0; i<gCO.length; i++ ){
 var gco = gCO[i];
 // crea un div
 var elDiv = document.createElement("div");
 elDiv.setAttribute("class", "large-4 columns");
 // crea un elemento canvas
 var lienzo = document.createElement("canvas");
 lienzo.setAttribute("id", "Canvas"+i);
 lienzo.setAttribute("width", "240");
 lienzo.setAttribute("height", "240");

 elDiv.appendChild(lienzo);

 //crea un parafo
 var elP = document.createElement("p");
 elP.setAttribute("class", "center");
 //crea el contenido del parafo
 var text = document.createTextNode(gco);
 elP.appendChild(text);

 elDiv.appendChild(elP);

 body.appendChild(elDiv);

 if (lienzo && lienzo.getContext) {
 var ctx = lienzo.getContext("2d");
 if (ctx) {
 testGCO(lienzo, ctx, i, gco)
 }
 }
 }


 function testGCO(lienzo, ctx, i, gco){
 ctx.globalCompositeOperation = gco;

 img.onload = function(gco) {
 }

 ctx.rect(0, 0, lienzo.width, lienzo.height);
 // crea un gradiente lineal vertical
 var grd = ctx.createLinearGradient(0, 0, 0, lienzo.height);
 grd.addColorStop(0,"#F06");
 ctx.fill();
 }
 }
Que son los data:uri



Con data:URI ( definido por RFC 2397 ) podemos incluir pequeños elementos de datos en línea, como si fueran referenciados hacia una fuente externa. Los data:URI tienen
la siguiente sintaxis:
data:[<mediatype>][;base64],<data>
El <mediatype> puede ser algo como image/png para una imagen de tipo .png. El <mediatype> es opcional, y si lo omitimos el <mediatype> por defecto es text/plain. He
aquí una lista con ejemplos de <mediatype>
Lo de base64 indica el tipo de codificación de los datos binarios. También es opcional. Podemos no especificarlo, como en este
ejemplo: data:text/html,<h1>Hola%20mundo!</h1>, donde los datos son textuales.
Finalmente <data> representa los datos codificados (o no) en base64.
Si esto suena a chino, sería mejor ver algunos ejemplos.
En el HTML
Podemos reemplazar el valor del atributo src con data:URI
 <img alt= "punto rojo" src= "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO 9TXL0Y4OHwAAAABJRU5ErkJggg==" />
En el CSS
Para imágenes de fondo también podemos utilizar data:URI.
 .data_uri {
 padding-left : 5px;
 background-image : url("data;image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO 9TXL0Y4OHwAAAABJRU5ErkJggg==");
 background-repeat : no-repeat;
 background-position : left 7px;
 }
En jQuery
En jQuery podemos utilizar data:URI con las funciones .insertBefore() o .insertAfter()
$( '<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" //>' ).insertBefore(".algo" );
Como crear data:URI
A continuación algunos enlaces útiles para transformar una imagen en data:URI. (Es recomendable que las imágenes sean pequeñas.)
URI kitchen - la cocina URI
http://websemantics.co.uk/ Solo imágenes tipo .png, jpg, o gif. Tamaño máximo: 32768 Bytes. Tamaño máximo de data:URI permitido en IE8 es de 32KB, o sea 32768 Bytes.
http://jpillora.com Crea data:URI por transferencia de archivos con "arrastrar y soltar"
O para los más atrevidos y conocedores de PHP, una función para transformar un fichero $file en data:URI.
 <?php
 function data_uri ( $file ) {
 $mime = mime_content_type ( $file ) ;
 $contents = file_get_contents ( $file ) ;
 $base64 = base64_encode ( $contents ) ;
 return "data : $mime;base64,$base64" ;
 }
 ?>
Crear data:uri desde canvas



El método toDataURL(tipo) convierte el contenido del <canvas> en una imagen data:uri. El parámetro entre paréntesis indica el tipo de imagen y puede tomar uno de los
siguientes valores:
 image/gif (imagen GIF)
 image/jpeg (imagen JPEG)
 image/png (imagen Portable Network Graphics)
 image/svg+xml (imagen vectorial SVG)
 image/x-icon (imagen favorite icon)
Si no especificamos ningún tipo de imagen, el método toDataURL() toma "image/png" por defecto.
A continuación dibujaremos en el <canvas> la imagen de un icono para enlaces. Procuraremos que la imagen sea muy pequeña.
Una vez dibujada la imagen podemos convertirla en data:uri: var url = canvas.toDataURL();
También sacaremos el código de data:uri en pantalla, de donde lo podemos copiar para utilizarlo luego en el código: document.getElementById("output").innerHTML = url;
Asimismo asignaremos el data:uri resultante como valor del atributo src de una imagen:document.getElementById("img").src = url;
 <span> canvas: </span><canvas width= "11" height= "12" id= "lienzo">Su navegador no soporta canvas :( </canvas>
 <div id= "output"></div>
 <span> imagen: </span><img alt= "data:uri test" id= "img" width= "11" height= "12" src= "images/dot.png" />
 var Canvas = document.getElementById("lienzo");
 if (Canvas && Canvas.getContext) {
 var ctx = Canvas.getContext("2d");
 if (ctx) {
 ctx.strokeStyle = "#2BA6CB";
 ctx.lineWidth=2;
 // cuerpo
 ctx.scale(.6,.6);
 ctx.moveTo(8,6);
 ctx.lineTo(1,6);
 //flecha
 ctx.moveTo(5,9);
 ctx.stroke();

 var url = Canvas.toDataURL();

 document.getElementById("output").innerHTML = url;
 document.getElementById("img").src = url;
 }
 }
 }
canvas:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAMCAYAAAC0qUeeAAAA+0lEQVQoU3WQO1ICURBFz2UmsDCQHThmWBMZaAruAEON2IG6A3fgEgYDIVRX
ADETMAZWmYk7MJGyik9bDc7UyOdF/e4773b3FaVz3E1vKnAHHJR1r+fiXOtivTeKApt1gMYCbk1kgdHfCkdPo1p1Mu1LvL5dnbX/Pn8s4bib2ro72IOD8eOwDbpH1ArY24HGFbME
2UsBSokZnxKHBexFZUFTcP1dDY/2J9MWUrKaOXwObJbNRWs5hsPvl6eDuDvsGDSEojwB1z0lX/Qf7IB/wBi4c27iui++AefLljvm2o40Vs9lZ7+r3kubm9GtlJ+9MBtfnHwVzrvAbfov9B
iAsSSiHU8AAAAASUVORK5CYII=
imagen:
Métodos save y restore



El contexto del <canvas> almacena lo que llamamos en ingles "the drawing state" y que podemos traducir como el estado del contexto.

El estado del contexto puede ser manipulado a través de JavaScript, y recoge los valores actuales de lineWidth,strokeStyle, fillStyle, lineCaps, etc… También recoge los
valores de las entradas de la matriz actual de transformación.
Estos valores pueden ser guardados con el método save(), y pueden ser recuperados con el método restore().
Al guardar un estado, este se almacena encima de los anteriores en una pila y cuando llamamos el métodorestore(), este recupera el último estado guardado, lo quita de la
pila y lo transforma en el actual estado del contexto.
En otras palabras: el último estado guardado es el primer recuperado. Veamos un ejemplo.
 if (ctx) {
 var X = canvas.width;
 var Y = canvas.height;

 ctx.fillStyle = "#333";
 ctx.fillRect(0,0,X,Y);
 ctx.save() // guarda el 1° estado

 ctx.fillStyle = "#999";
 ctx.fillRect(15,15,X-30,Y-30);
 ctx.save(); // guarda el 2° estado

 ctx.fillStyle = "#ccc";
 ctx.save(); // guarda el 3° estado

 ctx.fillStyle = "#eee";

 ctx.restore(); // recupera el 3° estado
 ctx.fillRect(60,60,X-120,Y-120);

 ctx.fillRect(75,75,X-150,Y-150);

 ctx.fillRect(90,90,X-180,Y-180);
 }
 }
 }
La posición del ratón



Para obtener la posición del ratón encima del <canvas> crearemos la función oMousePos() que devuelve un objeto con las coordenadas x e y del ratón.
Esta función utiliza el método getBoundingClientRect().
También escribiremos otras dos funciones:
marcarCoords() que da formato al <div id="output"> donde apuntaremos el valor de las coordenadas y
limpiarCoords() que borra el contenido del <div id="output">.
Utilizaremos el método addEventListener() para detectar el movimiento del ratón encima del canvas ("mousemove"). En este caso marcaremos las coordenadas
con marcarCoords().
También utilizaremos el método addEventListener() para registrar la salida del ratón fuera del <canvas>, y en este caso llamaremos la función limpiarCoords().
 <div id= "container" style= "position :relative; width :250px; height :220px; margin:0 auto 30px auto;">
 <div id= "output" style= "position :absolute; padding :5px;"></div>
 </div>
 if (ctx) {
 var output = document.getElementById("output");

 canvas.addEventListener("mousemove", function(evt) {
 var mousePos = oMousePos(canvas, evt);
 marcarCoords(output, mousePos.x, mousePos.y)
 }, false);

 canvas.addEventListener("mouseout", function(evt) {
 limpiarCoords(output);
 }, false);
 }
 }

 function marcarCoords(output, x, y){
 output.innerHTML = ("x: "+x+", y: "+y);
 output.style.top= (y+10)+"px";
 output.style.left= (x+10)+"px";
 output.style.backgroundColor="#FFF";
 output.style.border="1px solid #d9d9d9"
 canvas.style.cursor = "pointer";
 }

 function limpiarCoords(output){
 output.innerHTML ="";
 output.style.top= 0+"px";
 output.style.left= 0+"px";
 output.style.backgroundColor="transparent"
 output.style.border="none";
 canvas.style.cursor = "default";
 }

 function oMousePos(canvas, evt) {
 var ClientRect = canvas.getBoundingClientRect();
 return {//objeto
 x: Math.round(evt.clientX - ClientRect.left),
 y: Math.round(evt.clientY - ClientRect.top)
 }
 }
 }
Pase por encima del canvas para obtener la posición actual del ratón.
La posición del ratón



Para obtener la posición del ratón encima del <canvas> crearemos la función oMousePos() que devuelve un objeto con las coordenadas x e y del ratón.
Esta función utiliza el método getBoundingClientRect().
También escribiremos otras dos funciones:
marcarCoords() que da formato al <div id="output"> donde apuntaremos el valor de las coordenadas y
limpiarCoords() que borra el contenido del <div id="output">.
Utilizaremos el método addEventListener() para detectar el movimiento del ratón encima del canvas ("mousemove"). En este caso marcaremos las coordenadas
con marcarCoords().
También utilizaremos el método addEventListener() para registrar la salida del ratón fuera del <canvas>, y en este caso llamaremos la función limpiarCoords().
 <div id= "container" style= "position :relative; width :250px; height :220px; margin:0 auto 30px auto;">
 <div id= "output" style= "position :absolute; padding :5px;"></div>
 </div>
 if (ctx) {
 var output = document.getElementById("output");

 canvas.addEventListener("mousemove", function(evt) {
 var mousePos = oMousePos(canvas, evt);
 marcarCoords(output, mousePos.x, mousePos.y)
 }, false);

 canvas.addEventListener("mouseout", function(evt) {
 limpiarCoords(output);
 }, false);
 }
 }

 function marcarCoords(output, x, y){
 output.innerHTML = ("x: "+x+", y: "+y);
 output.style.top= (y+10)+"px";
 output.style.left= (x+10)+"px";
 output.style.backgroundColor="#FFF";
 output.style.border="1px solid #d9d9d9"
 canvas.style.cursor = "pointer";
 }

 function limpiarCoords(output){
 output.innerHTML ="";
 output.style.top= 0+"px";
 output.style.left= 0+"px";
 output.style.backgroundColor="transparent"
 output.style.border="none";
 canvas.style.cursor = "default";
 }

 function oMousePos(canvas, evt) {
 var ClientRect = canvas.getBoundingClientRect();
 return {//objeto
 x: Math.round(evt.clientX - ClientRect.left),
 y: Math.round(evt.clientY - ClientRect.top)
 }
 }
 }
Pase por encima del canvas para obtener la posición actual del ratón.
Crear un canvas adaptativo



Tenemos que decirlo alto y claro: El <canvas> ( HTML5 ) no es un elemento que se adapte fácilmente a los diferentes tamaños de pantalla. No es "responsive".
Las dimensiones del <canvas> vienen especificadas en pixeles en el HTML.
<canvas id= "Canvas1" width="250" height="220">Su navegador no soporta canvas :( </canvas>
Redimensionar el canvas con CSS
Podemos redimensionar el <canvas> con CSS pero esto sería como una imagen redimensionada.
En el siguiente ejemplo los dos <canvas> son iguales, con la única diferencia que el <canvas> de la derecha está redimensionado con CSS. Al redimensionar la ventana se
puede apreciar claramente que el segundo <canvas>cambia de tamaño, pero sigue teniendo el mismo número de pixeles.
 <div class= "contenedor"><canvas class= "lienzo" id= "lienzo1" width= "170" height= "170">Su navegador no soporta canvas :( </canvas></div>
 <div class= "contenedor"><canvas class= "lienzo" id= "lienzo2" width= "190" height= "190">Su navegador no soporta canvas :( </canvas></div>
 .contenedor {
 box-sizing : border-box;
 float : left;
 width : 50%;
 padding : 10px;
 }
 .lienzo {
 border : 1px solid #d9d9d9;
 }
 #lienzo1 {
 float : right;
 }
 #lienzo2 {
 width : 50%;
 }
 var canvasP = document.createElement("canvas");

 var ctxP = canvasP.getContext("2d");
 if (ctxP) {
 // creamos el patrón.
 ctxP.canvas.width = 20;
 ctxP.canvas.height = 20;
 ctxP.rect(0, 0, 10, 10);
 ctxP.rect(10, 10, 20, 20);
 ctxP.fillStyle = "#d9d9d9";
 ctxP.fillRect(0, 0, 10, 10);
 ctxP.fillRect(10, 10, 20, 20);
 }

 var canvas = document.getElementsByClassName("lienzo");
 var ctx;
 for( var i = 0; i<canvas.length; i++){
 if (canvas[i] && canvas[i].getContext) {
 ctx = canvas[i].getContext("2d");
 if (ctx) {console.log("Habemus context")
 ctx.restore();
 // aplicamos el patrón
 ctx.fillStyle = ctx.createPattern(canvasP,"repeat");
 ctx.fillRect(0,0, canvas[i].width, canvas[i].height);
 ctx.save();
 }
 }
 }
 }
Redimensionar el canvas con JavaScript
En este caso queremos cambiar el tamaño del <canvas> utilizando JavaScript. Para esto en el HTML no especificamos las dimensiones del lienzo.
 <div id= "div">
 <canvas id= "canvas">Su navegador no soporta canvas :( </canvas>
 </div>
En el CSS damos al <canvas> una altura y una anchura de 100%, y al <div> que lo contiene le damos width=50%. Se trata de 50% del <article> en este caso. Al redimensionar
la ventana, el <canvas> también cambia de tamaño.
 #div {
 width : 50%;
 height : 80%;
 margin : 0 auto;
 }
 #canvas {
 border : 1px solid #d9d9d9;
 width : 100%;
 height : 100%;
 }
Queremos dibujar un circulo en el <canvas> y queremos que sea "responsive", que cambie de tamaño con el<canvas>.
La idea principal
Cada vez que la ventana cambia de tamaño, JavaScript calcula las nuevas dimensiones del <canvas>, y dibuja el circulo en base a estas dimensiones. Lo hace llamando la
función inicializarCanvas().
setTimeout(function() {
inicializarCanvas();
addEventListener("resize", inicializarCanvas);
}, 15);
Cómo lo hace
El método getComputedStyle() devuelve un objeto ( CSSStyleDeclaration ) con todos los estilos computados del elemento. Utilizamos este método para calcular la anchura
y la altura del <canvas> redimensionado.
var s = getComputedStyle(canvas);
var w = s.width
var h = s.height;
La anchura y la altura del <canvas> vienen en pixeles así que tenemos que extraer el valor numérico.
var W = canvas.width = w.split('px')[0];
var H = canvas.height = h.split('px')[0];
A continuación calculamos las coordenadas del centro del circulo ( X, Y ) y el radio ( r ) utilizando la anchura ( W ) y la altura ( H ) calculadas. Utilizamos Math.floor para
deshacernos de los decimales.
X = Math.floor(W/2);
Y = Math.floor(H/2);
r = Math.floor(W/3);
Y finalmente dibujamos en el <canvas>
dibujarEnElCanvas(ctx);
 function inicializarCanvas(){
 if (ctx) {
 // calcula la anchura y la altura del canvas
 var s = getComputedStyle(canvas);
 var w = s.width;
 var h = s.height;
 // extrae el valor numerico
 W = canvas.width = w.split("px")[0];
 H = canvas.height = h.split("px")[0];
 // calcula las coordenadas del centro y el radio
 X = Math.floor(W/2);
 Y = Math.floor(H/2);
 r = Math.floor(W/3);
 // dibuja el circulo en el canvas
 dibujarEnElCanvas(ctx);
 }
 }
 }
La función dibujarEnElCanvas() es una función que tendremos que escribir:
function dibujarEnElCanvas(ctx){
ctx.strokeStyle = "#006400";
ctx.lineWidth = 5;
ctx.arc(X,Y,r,0,2*Math.PI);
ctx.fill();
ctx.stroke();
}
Ahora lo ponemos todo junto
 var canvas = document.querySelector("#canvas");
 var X,Y,W,H,r;
 canvas.height = 250;
 function inicializarCanvas(){
 if (ctx) {
 var s = getComputedStyle(canvas);
 var w = s.width;
 var h = s.height;

 W = canvas.width = w.split("px")[0];
 H = canvas.height = h.split("px")[0];

 X = Math.floor(W/2);
 Y = Math.floor(H/2);
 r = Math.floor(W/3);

 dibujarEnElCanvas(ctx);
 }
 }
 }

 function dibujarEnElCanvas(ctx){
 ctx.strokeStyle = "#006400";
 ctx.fillStyle = "#6ab155";
 ctx.arc(X,Y,r,0,2*Math.PI);
 ctx.fill();
 ctx.stroke();
 }

 setTimeout(function() {
 inicializarCanvas();
 addEventListener("resize", inicializarCanvas);
 }, 15);
 }
Al redimensionar la ventana tanto el <canvas> como el circulo dibujado dentro cambia de tamaño. El borde queda siempre de 5px ( ctx.lineWidth = 5 ) como establecido en
la función dibujarEnElCanvas().
- El método getComputedStyle

Canvas

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Canvas

Transféré par

Droits d'auteur :

Formats disponibles

Canvas

Devuelve un objeto que proporciona todos los métodos y

Convierte el contenido del canvas en una imágen - data:uri. El

Colores, estilos, y sombras

context.fillStyle = color | gradiente | Determina o devuelve el color, gradiente o patrón del

context.strokeStyle = color | Determina o devuelve el color, gradiente o patrón de la

Determina (sets) o devuelve (returns) la grosor de la

Determina (sets) o devuelve (returns) el color utilizado #000000;

Determina (sets) o devuelve (returns) el nivel de

Determina (sets) o devuelve (returns) la distancia

Determina (sets) o devuelve (returns) la distancia

Método JavaScript Descripción Defecto

Crea un gradiente lineal para

context.createPattern(img,"repeat | repeat-x | repeat-y Repite una imagen en la

Crea un gradiente radial para

Especifica los colores y la

lineWidth context.lineWidth=numero; Determina (sets) o devuelve (returns) la grosor de la línea. 1

Determina (sets) o devuelve (returns) el aspecto de las puntas

Determina (sets) o devuelve (returns) el aspecto de las juntas

Determina (sets) o devuelve (retursn) el aspecto de las juntas en

rect() context.rect(x,y,anchura,altura); Dibuja un rectángulo desde un punto (x,y).

fillRect() context.fillRect(x,y,anchura,altura); Dibuja y rellena un rectángulo desde un punto (x,y).

strokeRect() context.strokeRect(x,y,anchura,altura); Dibuja un rectángulo desde un punto (x,y).

Borra los píxeles especificados dentro de un rectángulo

fill() context.fill(); Rellena una forma geométrica. black

stroke() context.stroke(); Dibuja una línea ya definida.

beginPath() context.beginPath(); Inicia un nuevo trazado

Mueve el "lapiz" a un punto en el canvas, especificado por x=0;

closePath() context.closePath(); Cierra una línea poligonal o una línea curva

Define una línea desde un punto especificado anteriormente

Recorta una región con la forma y tamaño del trazado

Define una curva cuadráticas de Bézier.

Define una curva de Bézier.

Define un segmento circular.

radianes = (Math.Pi / 180) * grados;

Detecta si un punto cuyas coordenadas son x e y se encuentra

Reduce o amplía a escala el dibujo actual.

Gira los trazados posteriores un ángulo dado (en radianes). El

transform() context.transform(a,b,c,d,e,f); Cambia los trazados posteriores, cambiando la matriz de estos.

Reinicia el canvas a los valores iniciales, antes de proceder a

context.font = "font-style font-variant font-weight

context.textAlign="center | end | left | right |

Método JavaScript Descripción Defecto

Dibuja texto relleno con un color, gradiente o patrón

Dibuja texto bordeado con un color, gradiente o patrón

Devuelve un objeto que contiene la anchura del texto

drawImage() context.drawImage(img,x,y); Dibuja una imagen en el canvas desde el punto(x,y)

Dibuja una imagen en el canvas desde el punto(x,y),

Recorta la imagen empezando desde un punto (sx,

y), w y h siendo el ancho y el alto de la imagen

width imgData.width Devuelve el ancho del objeto ImageData, en píxeles

height imgData.height Devuelve la altura del objeto ImageData, en píxeles

Método JavaScript Descripción Defecto

Crea un nuevo objeto ImageData en

Crea un nuevo objeto ImageData con las

Devuelve un objeto ImageData que copia

Pone los datos de la imagen (de un objeto

Determina (sets) o devuelve (returns) el valor alfa o

Define la apariencia de nuevos trazados, y como

save() context.save(); Guarda el estado actual del canvas.

restore() context.restore() Recupera el estado previamente guardado del canvas.

Devuelve un objeto (context) que proporciona todos los métodos y

Convierte el contenido del canvas en una imagen data:uri. El parámetro