Global Composite Operations
Learn to Apply HTML5 Options
Introduction to Global Composite Operations
Global composite operations manipulate numbers which represent colors, to create interesting and useful visual effects with graphics and html5.
Global composite operations perform mathematical functions on pixels of overlapping graphics. Overlapping graphics are bitmap images or graphical shapes which occupy the same location on the canvas.
The terms destination
and source
describe the order in which images are drawn to
the canvas.
The destination
image renders to the canvas first.
The source
image draws to the canvas second.
Consider areas of the destination
graphic as
underneath the source
graphic.
Composite operations process areas where the source
graphic overlaps the destination
graphic.
For example assume we created a blue circle toward the left side of the canvas. Then we placed a red circle toward the right side of the canvas. Global composite operations would perform simple math against every pixel in the red circle that covered any pixel in the blue circle.
The lighter
global composite operation
adds color channels together. Every overlapping pixel
in the source circle would be added to every overlapping
pixel in the destination circle.
Assume the destination circle is pure blue.
Pure blue in decimal notation is rgb(0,0,255)
.
Assume the source circle is pure red.
Pure red in decimal notation is rgb(255,0,0)
.
Add each color channel individually. The sum
equals bright violet rgb(255,0,255)
.
0, 0, 255 + 255, 0, 0 ______________ 255, 0, 255
The lighter
global composite
operation would turn the overlapping areas bright violet as follows.
Lighter Global Composite Operation
The following line of JavaScript demonstrates how
to assign the lighter
global composite operation with JavaScript.
context
is a user defined JavaScript variable
representing the canvas' 2D context.
context.globalCompositeOperation = "lighter";
Global Composite Examples
It's helpful to see how composite operations affect graphics and animation.
Interactive online examples representing
static global composite graphics
and animated
global composite options with alpha,
demonstrate each operation.
Select various composite operations from the drop down menus. A screen shot of the global composite operation, with xor
selected, follows.
XOR Global Composite Operation
Most current browsers support global composite operations to some extent. However some older browsers interpret global composite operations differently. Therefore don't be surprised if operations do nothing at all, or provide unexpected results in old Web browsers.
Global Composite Options
HTML5 global composite options include
source-over, source-atop, source-in, source-out,
destination-over, destination-atop, destination-in, destination-out,
lighter, darker, copy, and xor.
The darker global composite operation was removed from the HTML5 standard.
However it's covered below. Some browsers process the darker global composite operation.
The following examples explain each composite operation.
For each example, the blue circle is the destination
graphic and the red circle is the source graphic.
The blue circle renders first, with the default
globalCompositeOperation="source-over".
The red circle renders second.
The red circle displays with the global composite operation
currently under discussion.
The destination blue circle is drawn toward the left. The source red circle is drawn toward the right. The area where the blue and red circles overlap, demonstrates the specific global composite operation.
Composite: Source Over
source-over
is the default global composite operation.
source-over
simply draws source graphics directly over destination graphics.
The following graphic demonstrates source-over
.
An opaque red circle renders over the blue circle.
Source Over
Composite: Source Atop
The source-atop
composite operation also draws the source image over the
destination image. However, any part of the source image which is
outside the perimeter of the destination image, will be cropped.
The following graphic demonstrates source-atop
.
The red circle is cropped to the inside edges of the blue circle.
Source-atop, among other global composite operations, might prove useful for masking sections of graphics.
Source Atop
Composite: Source In
The source-in
composite operation draws the source image over the
destination image. Similar to source-atop
,
any part of the source image which is
outside the perimeter of the destination image, will be cropped.
Additionally only portions of the source image display.
The destination image behaves like a mask only.
The perimeter of the destination image crops the edges of
the source image.
The following graphic demonstrates source-in
.
The red circle is cropped to the inside edges of the blue circle.
Source In
Composite: Source Out
The source-out
composite operation draws only
those portions of the source image which are outside
the perimeter of the destination image.
Only portions of the source image display.
The destination image acts like a mask.
The following graphic demonstrates source-out
.
The red circle is cropped to the outside edges of the blue circle.
The blue circle is invisible.
Source Out
Composite: Destination Over
destination-over
simply draws destination graphics directly over
source graphics.
The following graphic demonstrates destination-over
.
An opaque blue circle is drawn over the red circle.
Destination Over
Composite: Destination Atop
The destination-atop
composite operation also draws the destination image over the
source image. However, any part of the destination image which is
outside the perimeter of the source image, will be cropped.
The following graphic demonstrates destination-atop
.
The blue circle is cropped to the inside edges of the red circle.
Destination Atop
Composite: Destination In
The destination-in
composite operation draws the destination image over the
source image. Similar to destination-atop
,
any part of the destination image which is
outside the perimeter of the source image, will be cropped.
Additionally only portions of the destination image display.
The source image behaves like a mask only.
The perimeter of the source image crops the edges of
the destination image.
The following graphic demonstrates destination-in
.
The blue circle is cropped to the inside edges of the red circle.
Destination In
Composite: Destination Out
The destination-out
composite operation draws only
those portions of the destination image which are outside
the perimeter of the source image.
Only portions of the destination image display.
The source image acts like a mask only.
The following graphic demonstrates destination-out
.
The blue circle is cropped to the outside edges of the red circle.
The red circle is invisible.
Destination Out
Composite: Lighter
The lighter
composite operation draws
both the destination and source image.
However the lighter
composite operation
adds color channels together,
for each overlapping pixel.
In the following example the red, green, and blue channels of
the blue circle, are added to the red, green, and blue
channels of the red circle. Therefore the
area where the blue circle overlaps the red circle
is bright violet.
The blue circle's red and green channels are zero.
The blue circle's blue channel is FF
in hexadecimal notation.
Blue may be represented in hexadecimal notation as #0000FF
.
The red circle's blue and green channels are zero.
The red circle's red channel is FF
in hexadecimal notation.
Red may be represented in hexadecimal notation as #FF0000
.
#0000FF
plus #FF0000
equals #FF00FF
,
which is bright violet.
0000FF + FF0000 _________ FF00FF
The section titled Introduction to Global Composite Operations demonstrated the same addition operation with decimal digits. This section used hexadecimal notation. For a hexadecimal color tutorial, see the site map.
The following graphic illustrates the lighter global composite operation.
Lighter
Creativity with Lighter
Perhaps the lighter
option provides some of the most useful or
unusual creative opportunities. With animation colors grow brighter as
they dynamically overlap. Include alpha transparency for liquid, lava, plastic,
paint and many other beautiful effects.
Composite: Darker
Originally darker
was part of the HTML5 specification
for global composite operations.
However darker
has been removed from the specification.
Browser venders were not consistent regarding how to define the term darker
.
The online composite demo
includes darker
in the drop down menu.
Some browsers have implemented darker
, others haven't implemented darker
.
Some browsers render overlapping areas of the blue and red circle,
as dark violet. The following graphic provides an example.
Darker
Composite: Copy
The copy
composite operation draws
only the source image.
The destination image is invisible.
Some browsers render the copy
operation on top of other
drawing operations.
Whatever was drawn before
the copy
operation, remains on the
screen along with the current drawing operation.
Therefore copy
behaves like
the default global composite operation source-over
.
Perhaps those browser vendors simply
haven't implemented copy
yet.
However some browsers clear the canvas,
then display the current drawing operation.
Due to inconsistency, none of the example animations
use the copy
operation.
Example animations
which require a clear canvas
for each drawing operation,
call context.clearRect(),
between animation frames.
If future browser vendors
implement copy
,
some effects will require fewer JavaScript operations.
Copy
Composite: XOR
The XOR
composite operation in most browsers,
removes color where two elements overlap.
See the following graphic for an example of the global composite XOR
operation.
For those familiar with bit wise operations,
XOR
represents the exclusive or
logical operator.
Some Websites claim global composite operations provide a bit wise XOR
.
However, that does not seem to be the case with all browsers.
A bit wise XOR
compares each bit in two colors. If exactly one bit equals one,
then that bit would display color.
For example display two overlapping circles. The destination circle's color
in hexadecimal notation is #ff33ff
.
The source circle's color in hexadecimal is #ff00ff
.
Bit wise #ff33ff
XOR with #ff00ff
equals #003300
.
It seems that a bit wise XOR
should display #003300
in the overlapping area.
However, that's not the case with the XOR
operation, in all Web browsers tested.
The XOR
global composite operation within many browsers, behaves more like an AND
global composite operation. For example, overlap two circles with the colors #ff33ff
and #ff00ff
.
The overlapping area disappears, displaying the default background color.
Those areas of each circle which do not overlap
each other, displayed with the color #ff00ff
.
Therefore the color #003300
was subtracted from both circles. Overlapping
areas which would display #003300
, in our tests disappeared.
The following purple checkered pattern,
was created with the xor
global composite operation.
Purple Checkered Pattern on Spheres
To make a long story short,
XOR
simply removes color from
overlapping areas, within the browsers that were tested.
The following graphic demonstrates XOR
with
a blue destination circle and red source circle.
Composite XOR
Global Composite Operations Summary
Global composite operations manipulate numbers, which represent colors, to create interesting and useful visual effects.
Global composite operations perform mathematical functions on pixels of overlapping graphics. Overlapping graphics are bitmap images or graphical shapes which occupy the same location on the canvas.
The terms destination
and source
describe the order in which images are drawn to the canvas.
The destination
image renders to the canvas first.
The source
image displays to the canvas second.
Consider areas of the destination
graphic as
underneath the source
graphic.
Composite operations process areas where the source
graphic
overlaps the destination
graphic.
The lighter
global composite
operation turns overlapping blue and red areas bright violet, with addition.
Other similar calculations process overlapping colors to
render a large set of composite operations, including
source-over, source-atop, source-in, source-out,
destination-over, destination-atop, destination-in, destination-out,
lighter, darker, copy, and xor.
Web Development Company
Seven Thunder Software's Web programming skills include HTML5, CSS3, JavaScript, WebGL, GLSL and some PHP with MySQL and Python 3. Web design skills include Web graphics with Photoshop, animation with After Effects and 3ds Max.
