Canvas - CSS

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"