Global Composite Operations

Learn to Apply HTML5 Options

Global Composite Operations Example Introduction Global Composite Examples Options Composite: Source Over Composite: Source Atop Composite: Source In Composite: Source Out Composite: Destination Over Composite: Destination Atop Composite: Destination In Composite: Destination Out Composite: Lighter Composite: Darker Composite: Copy Composite: XOR Summary JavaScript Source

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

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.

Global Composite XOR

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

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

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

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

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

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

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

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

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

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

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

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.

Checkered Spheres

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.

XOR

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.

Tags

Web developer, Web design, Website design, Web design company, Web programming Web development company, Website developers,webdev, how to design a Website, create a Website, Web application development, freelance Web developer, freelance Web designer, Web creator, developer Website, new Website design, Webpage development, Weebsite design company JavaScript, html5, Web development, Web programming, WebGL programming, Web projects, html 5, Web GL, Web design, Website developer, Web programming, design a Website, js, JavaScript code,JavaScripts, JavaScript help, css3, JavaScript program, css,
Learn 3D Programming Learn 3D Programming
Copyright © 2015 Seven Thunder Software. All Rights Reserved.