Tutorial by Examples

context.globalCompositeOperation = "destination-over" "destination-over" compositing places new drawing under existing drawings. context.drawImage(rainy,0,0); context.globalCompositeOperation='destination-over'; // sunny UNDER rainy context.drawImage(sunny,0,0);

context.globalCompositeOperation = "destination-out" "destination-out" compositing uses new shapes to erase existing drawings. The new shape is not actually drawn -- it is just used as a "cookie-cutter" to erase existing pixels. context.drawImage(apple,0,0); conte...

context.globalCompositeOperation = "source-over" "source-over" compositing [default], places all new drawings over any existing drawings. context.globalCompositeOperation='source-over'; // the default context.drawImage(background,0,0); context.drawImage(parachuter,0,0); ...

context.globalCompositeOperation = "destination-in" "destination-in" compositing clips existing drawings inside a new shape. Note: Any part of the existing drawing that falls outside the new drawing is erased. context.drawImage(picture,0,0); context.globalCompositeOperation...

context.globalCompositeOperation = "source-in"; source-in compositing clips new drawings inside an existing shape. Note: Any part of the new drawing that falls outside the existing drawing is erased. context.drawImage(oval,0,0); context.globalCompositeOperation='source-in'; // pictu...

context.globalCompositeOperation = 'source-atop' source-atop compositing clips new image inside an existing shape. // 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 ct...

Render a white rectangle over an image with the composite operation ctx.globalCompositeOperation = 'difference'; The amount of the effect can be controled with the alpha setting // Render the image ctx.globalCompositeOperation='source-atop'; ctx.drawImage(image, 0, 0); // set the composite...

Remove color from an image via ctx.globalCompositeOperation = 'color'; The amount of the effect can be controled with the alpha setting // Render the image ctx.globalCompositeOperation='source-atop'; ctx.drawImage(image, 0, 0); // set the composite operation ctx.globalCompositeOperation='...

Increase the saturation level of an image with ctx.globalCompositeOperation = 'saturation'; The amount of the effect can be controled with the alpha setting or the amount of saturation in the fill overlay // Render the image ctx.globalCompositeOperation='source-atop'; ctx.drawImage(image, 0, ...

Create a colored sepia FX with ctx.globalCompositeOperation = 'luminosity'; In this case the sepia colour is rendered first the the image. The amount of the effect can be controled with the alpha setting or the amount of saturation in the fill overlay // Render the image ctx.globalCompositeOp...

context.globalAlpha=0.50 You can change the opacity of new drawings by setting the globalAlpha to a value between 0.00 (fully transparent) and 1.00 (fully opaque). The default globalAlpha is 1.00 (fully opaque). Existing drawings are not affected by globalAlpha. // draw an opaque rectangle co...