Search within TutorialsPark

HTML5 Canvas Composting


To create great effects using global Composite operations property.


Canvas Composite Operations : globalCompositeOperation


1.Striking composition effects can be created using context's property of globalCompositeOperation.

2.It displays the composite operations between the two states of the drawing,Source and Destination.

Source : Denotes the Drawing on the canvas upon which a composite operation is performed.

Destination : Denotes the object on the canvas used to perform a composite operation with,i.e the active object

3.The Opacity of Source and Destination objects can vary from opaque(alpha 1) to transparent(alpha 0) to translucent(1 < alpha <0).

4.The property has eleven composite modes, which also includes a default mode to support vendor specific extensions. Eleven possible values of globalCompositeOperations are:

source-over

source-in

source-out

source-atop

destination-over

destination-over

destination-in

destination-out

destination-atop

lighter

darker

copy

xor

Example: Canvas globalCompositeOperation.

Give it a TRY! » Exercise-Try globalCompositeOperator for all 11 values in the editor, to understand the effects completely.