Buscar..
Dibuja detrás de las formas existentes con "destino sobre"
context.globalCompositeOperation = "destination-over"
La composición "destino sobre" coloca el nuevo dibujo debajo de los dibujos existentes .
context.drawImage(rainy,0,0);
context.globalCompositeOperation='destination-over'; // sunny UNDER rainy
context.drawImage(sunny,0,0);
Borre las formas existentes con "destination-out"
context.globalCompositeOperation = "destination-out"
La composición "destination-out" utiliza nuevas formas para borrar los dibujos existentes.
La nueva forma no está realmente dibujada, solo se utiliza como "cortador de galletas" para borrar los píxeles existentes.
context.drawImage(apple,0,0);
context.globalCompositeOperation = 'destination-out'; // bitemark erases
context.drawImage(bitemark,100,40);
Composición predeterminada: las nuevas formas se dibujan sobre las formas existentes
context.globalCompositeOperation = "source-over"
La composición de "fuente sobre" [predeterminada] , coloca todos los dibujos nuevos sobre los dibujos existentes.
context.globalCompositeOperation='source-over'; // the default
context.drawImage(background,0,0);
context.drawImage(parachuter,0,0);
Clip imágenes dentro de formas con "destino-en"
context.globalCompositeOperation = "destination-in"
La composición de "destino en" recorta los dibujos existentes dentro de una nueva forma.
Nota: se borra cualquier parte del dibujo existente que se encuentre fuera del dibujo nuevo.
context.drawImage(picture,0,0);
context.globalCompositeOperation='destination-in'; // picture clipped inside oval
context.drawImage(oval,0,0);
Clip imágenes dentro de formas con "fuente-en"
context.globalCompositeOperation = "source-in";
source-in composición de source-in clips nuevos dibujos dentro de una forma existente.
Nota: se borra cualquier parte del nuevo dibujo que se encuentre fuera del dibujo existente.
context.drawImage(oval,0,0);
context.globalCompositeOperation='source-in'; // picture clipped inside oval
context.drawImage(picture,0,0);
Sombras internas con "fuente-encima"
context.globalCompositeOperation = 'source-atop'
source-atop composición de source-atop sujeta una nueva imagen dentro de una forma existente.
// gold filled rect
ctx.fillStyle='gold';
ctx.fillRect(100,100,100,75);
// shadow
ctx.shadowColor='black';
ctx.shadowBlur=10;
// restrict new draw to cover existing pixels
ctx.globalCompositeOperation='source-atop';
// shadowed stroke
// "source-atop" clips off the undesired outer shadow
ctx.strokeRect(100,100,100,75);
ctx.strokeRect(100,100,100,75);
Invertir o negar imagen con "diferencia"
Renderizar un rectángulo blanco sobre una imagen con la operación compuesta
ctx.globalCompositeOperation = 'difference';
La cantidad del efecto se puede controlar con el ajuste alfa
// Render the image
ctx.globalCompositeOperation='source-atop';
ctx.drawImage(image, 0, 0);
// set the composite operation
ctx.globalCompositeOperation='difference';
ctx.fillStyle = "white";
ctx.globalAlpha = alpha; // alpha 0 = no effect 1 = full effect
ctx.fillRect(0, 0, image.width, image.height);
Blanco y negro con "color"
Eliminar color de una imagen a través de
ctx.globalCompositeOperation = 'color';
La cantidad del efecto se puede controlar con el ajuste alfa
// Render the image
ctx.globalCompositeOperation='source-atop';
ctx.drawImage(image, 0, 0);
// set the composite operation
ctx.globalCompositeOperation='color';
ctx.fillStyle = "white";
ctx.globalAlpha = alpha; // alpha 0 = no effect 1 = full effect
ctx.fillRect(0, 0, image.width, image.height);
Incrementa el contraste de color con "saturación"
Aumenta el nivel de saturación de una imagen con
ctx.globalCompositeOperation = 'saturation';
La cantidad del efecto se puede controlar con la configuración alfa o la cantidad de saturación en la superposición de relleno
// Render the image
ctx.globalCompositeOperation='source-atop';
ctx.drawImage(image, 0, 0);
// set the composite operation
ctx.globalCompositeOperation ='saturation';
ctx.fillStyle = "red";
ctx.globalAlpha = alpha; // alpha 0 = no effect 1 = full effect
ctx.fillRect(0, 0, image.width, image.height);
Sepia FX con "luminosidad"
Crea un color sepia FX con
ctx.globalCompositeOperation = 'luminosity';
En este caso, el color sepia se representa primero en la imagen.
La cantidad del efecto se puede controlar con la configuración alfa o la cantidad de saturación en la superposición de relleno
// Render the image
ctx.globalCompositeOperation='source-atop';
ctx.fillStyle = "#F80"; // the color of the sepia FX
ctx.fillRect(0, 0, image.width, image.height);
// set the composite operation
ctx.globalCompositeOperation ='luminosity';
ctx.globalAlpha = alpha; // alpha 0 = no effect 1 = full effect
ctx.drawImage(image, 0, 0);
Cambia la opacidad con "globalAlpha"
context.globalAlpha=0.50
Puede cambiar la opacidad de los nuevos dibujos configurando globalAlpha en un valor entre 0.00 (totalmente transparente) y 1.00 (totalmente opaco).
El valor globalAlpha predeterminado es 1.00 (totalmente opaco).
Los dibujos existentes no se ven afectados por globalAlpha .
// draw an opaque rectangle
context.fillRect(10,10,50,50);
// change alpha to 50% -- all new drawings will have 50% opacity
context.globalAlpha=0.50;
// draw a semi-transparent rectangle
context.fillRect(100,10,50,50);