⇪

Canvas - la chuleta

facebook-svg gplus-svg twitter-svg

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
getContext() canvas.getContext("2d"); Devuelve un objeto que proporciona todos los métodos y propiedades para dibujar en el canvas.  
toDataURL() canvas.toDataURL(tipo); Convierte el contenido del canvas en una imágen - data:uri. El parámetro entre paréntesis indica el tipo de imágen image/png

Colores, estilos, y sombras

Método JavaScript Descripción Defecto
fillStyle context.fillStyle = color | gradiente | patrón; Determina o devuelve el color, gradiente o patrón del relleno. negro
strokeStyle context.strokeStyle = color | gradiente | patrón; Determina o devuelve el color, gradiente o patrón de la línea. negro
lineWidth context.lineWidth=numero; Determina (sets) o devuelve (returns) la grosor de la línea. 1
shadowColor context.shadowColor=color; Determina (sets) o devuelve (returns) el color utilizado para las sombras. #000000;
transparente
shadowBlur context.shadowBlur=number; Determina (sets) o devuelve (returns) el nivel de desenfoque de las sombras. 0
shadowOffsetX context.shadowOffsetX=number; Determina (sets) o devuelve (returns) la distancia horizontal entre la sombra y la forma que la genera. El valor tiene que ser > 0 para que la sombra tenga efecto. 0
shadowOffsetY context.shadowOffsetY=number; Determina (sets) o devuelve (returns) la distancia horizontal entre la sombra y la forma que la genera. El valor tiene que ser > 0 para que la sombra tenga efecto. 0

Método JavaScript Descripción Defecto
createLinearGradient() context.createLinearGradient(x0,y0,x1,y1); Crea un gradiente lineal para utilizar en el <canvas>
x0,y0 son las coordenadas del punto donde empieza el gradiente.
x1,y1 son las coordenadas del punto donde acaba el gradiente. 		 
createPattern() context.createPattern(img,"repeat | repeat-x | repeat-y | no-repeat"); Repite una imagen en la dirección especificada.  
createRadialGradient() context.createRadialGradient(x0,y0,r0,x1,y1,r1); Crea un gradiente radial para utilizar en el <canvas>
x e y son las coordenadas del centro de los circulos
r es el radio de los circulos. 		 
addColorStop() gradient.addColorStop(stop,color); Especifica los colores y la 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
lineCap context.lineCap="butt|round|square"; Determina (sets) o devuelve (returns) el aspecto de las puntas de una línea. butt
lineJoin context.lineJoin="bevel|round|miter"; Determina (sets) o devuelve (returns) el aspecto de las juntas entre líneas. Posibles valores: bevel (biselado), round (redondeado), miter (en angulo) mitter
miterLimit context.miterLimit=numero; Determina (sets) o devuelve (retursn) el aspecto de las juntas en miter. Puede tomar valores entre 1 (punta roma, aspecto biselado) y 5 (punta en angulo). 10

Rectángulos

Método JavaScript Descripción Defecto
rect() context.rect(x,y,anchura,altura); Define un rectángulo desde un punto (x,y).  
fillRect() context.fillRect(x,y,anchura,altura); Define y rellena un rectángulo desde un punto (x,y).  
strokeRect() context.strokeRect(x,y,anchura,altura); Define y dibuja un rectángulo desde un punto (x,y).  
clearRect(); context.clearRect(x,y,width,height); Borra los píxeles especificados dentro de un rectángulo dado.  

Trazados

Método JavaScript Descripción Defecto
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  
moveTo() context.moveTo(x,y); Mueve el "lapiz" a un punto en el canvas, especificado por sus coordenadas "x" e "y". NO DIBUJA ninguna línea. x=0;
y=0;
closePath() context.closePath(); Cierra una línea poligonal o una línea curva  
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.  
clip() context.clip() Recorta una región con la forma y tamaño del trazado dibujado previamente en el canvas. Cualquier cosa dibujada después, será visible solo dentro de la región de recorte ( clipping region ).  
quadraticCurveTo() context.quadraticCurveTo( cx,cy,x,y) ; Define una curva cuadráticas de Bézier.
cx,cy = coordenadas punto de anclaje (control point)
x,y = coordenadas punto final (el punto de partida siendo determinado previamente).		  
bezierCurveTo() context.bezierCurveTo( cx1,cy1,cx2,cy2,x,y ); Define una curva de Bézier.
cx1,cy1,cx2,cy2= coordenadas puntos de anclaje (control points)
x,y = coordenadas punto final (el punto de partida siendo determinado previamente).		  
arc() context.arc( x, y, r, sA, eA, aC ) Define un segmento circular.
x y = coordenadas centro
r = radio
sA = ángulo de partida en radianes
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  
ellipse() context.ellipse(X, Y, rX, rY, ar, ap, af, cR); Dibuja una elipse
X y Y son las coordenadas del centro,
rX y rY representan el radio en x y el radio en y,
ar representa el ángulo de rotación del eje horizontal (en radianes),
ap es el ángulo de partida ( en radianes ),
af es el ángulo final ( en radianes ), y
cR en el sentido del reloj ( false ) o en sentido contrario ( true )

  
isPointInPath() context.isPointInPath(x,y); Detecta si un punto cuyas coordenadas son x e y se encuentra en un trazado dado  

Transformations

Método JavaScript Descripción Defecto
scale() context.scale(h,v); Reduce o amplía a escala el dibujo actual.
h = horizontal; v = vertical
Valores que pueden tomar los parametros del método: 1=100%, 0.5=50%, 2=200%, etc... 		1
rotate() context.rotate(ángulo); Gira los trazados posteriores un ángulo dado (en radianes). El 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.  
setTransform() context.setTransform(a,b,c,d,e,f); Reinicia el canvas a los valores iniciales, antes de proceder a cambiar los trazados posteriores.  

Text

Propiedad JavaScript Descripción Defecto
font context.font = "font-style font-variant font-weight font-size font-family";
context.font = "italic small-caps bold 12px arial";		   10px sans-serif
textAlign context.textAlign="center | end | left | right | start";   start
textBaseline context.textBaseline =
"alphabetic | top | hanging | middle | ideographic | bottom";		 Determina (sets) o devuelve (returns) la alineación vertical del texto. alphabetic

Método JavaScript Descripción Defecto
fillText() context.fillText(text,x,y,maxWidth); Dibuja texto relleno con un color, gradiente o patrón previamente definido.
maxWidth es opcional. No se admite en Safari. 		#000;
strokeText() context.strokeText(text,x,y,maxWidth); Dibuja texto bordeado con un color, gradiente o patrón previamente definido.
maxWidth es opcional.		 black
measureText() context.measureText(text).width; Devuelve un objeto que contiene la anchura del texto especificado entre paréntesis.  

Image Drawing

Método JavaScript Descripción Defecto
drawImage() context.drawImage(img,x,y); Dibuja una imagen en el canvas desde el punto (x,y)  
drawImage() context.drawImage(img,x,y,w,h); Dibuja una imagen en el canvas desde el punto (x,y), donde w y h son el ancho y el alto de la imagen, respectivamente.  
drawImage() context.drawImage(img,sx,sy,sw,sh,x,y,w,h); Recorta la imagen empezando desde un punto (sx, sx), sw y sh siendo el ancho y el alto de la zona 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

Propiedad JavaScript Descripción Defecto
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.  

Método JavaScript Descripción Defecto
createImageData() context.createImageData( ancho, alto ); Crea un nuevo objeto ImageData en blanco. Toma dos argumentos: la anchura y la altura del objeto creado  
createImageData() context.createImageData(imgData); Crea un nuevo objeto ImageData con las mismas dimensiones que el objeto especificado por el argumanto imgData.  
getImageData() context.getImageData ( x, y, ancho, alto ); Devuelve un objeto ImageData que copia los datos de los píxeles del rectángulo especificado.  
putImageData() context.putImageData( imgData, x, y, [dirtyX, dirtyY, dirtyWidth, dirtyHeight] ); Pone los datos de la imagen (de un objeto ImageData especificado) de nuevo en el canvas  

Compositing

Propiedad JavaScript Descripción Defecto
globalAlpha context.globalAlpha = numero Determina (sets) o devuelve (returns) el valor alfa o la transparencia actual del dibujo. 1.0
globalCompositeOperation context. globalCompositeOperation = "source-in" Define la apariencia de nuevos trazados, y como estos afectan o están afectados por los trazados ya existentes en el <canvas>.
posibles valores: source-over, source-in, source-out, source-atop, destination-over, destination-atop, destination-in, destination-out, lighter, darker, copy, xor		 source-over

Other

Método JavaScript Descripción Defecto
save() context.save(); Guarda el estado actual del canvas.  
restore() context.restore() Recupera el estado previamente guardado del canvas.  
getContext() canvas.getContext("2d"); Devuelve un objeto (context) que proporciona todos los métodos y propiedades para dibujar en el canvas.  
toDataURL() canvas.toDataURL() Convierte el contenido del canvas en una imagen data:uri. El parámetro entre paréntesis indica el tipo de imagen. "image/png"