Composite Operation

The composite operation is a term used in web development, particularly in the context of HTML canvas. It refers to the way in which two different images are combined to create a new image. The composite operation specifies how the pixels of the foreground and background images are blended together to create a final output image.

Purpose of Composite Operation

The purpose of the composite operation is to provide a way to combine images in a flexible and customizable way. Using composite operations, developers can create complex visual effects and manipulate images to achieve a desired result. For example, you can use composite operations to create a transparent overlay on an image, apply filters or masks, or blend multiple images together.

Usage of Composite Operation

The composite operation is used in HTML canvas, a powerful drawing and graphics API that allows developers to create dynamic and interactive graphics on a web page. The canvas element provides a drawing surface that can be used to render images, text, and other graphical objects. With the composite operation, developers can specify how different images and objects are combined on the canvas, creating complex and visually stunning effects.

The composite operation is specified using the globalCompositeOperation property of the canvas context object. This property specifies the type of blending that should be used when rendering a new object or image. There are several composite operations available, each with its own unique characteristics and effects.

Types of Composite Operations

Source Over

The source-over composite operation is the default operation and is used when no other operation is specified. With this operation, the new object or image is drawn on top of the existing canvas content. The pixels of the new object completely cover those of the existing content, creating a new layer on top of the canvas.

Source In

The source-in composite operation only displays the portion of the new object that overlaps with the existing canvas content. The result is a new image that is clipped to the shape of the existing content.

Source Out

The source-out composite operation displays only the portion of the new object that does not overlap with the existing canvas content. The result is a new image that is the inverse of the source-in operation.

Source Atop

The source-atop composite operation displays the new object on top of the existing canvas content, but only where the two images overlap. The result is a new image that is clipped to the shape of the existing content.

Destination Over

The destination-over composite operation draws the new object beneath the existing canvas content. The pixels of the new object are drawn behind those of the existing content, creating a new layer behind the canvas.

Destination In

The destination-in composite operation displays only the portion of the existing content that overlaps with the new object. The result is a new image that is clipped to the shape of the new object.

Destination Out

The destination-out composite operation displays only the portion of the existing content that does not overlap with the new object. The result is a new image that is the inverse of the destination-in operation.

Destination Atop

The destination-atop composite operation displays the existing content on top of the new object, but only where the two images overlap. The result is a new image that is clipped to the shape of the new object.

Lighter

The lighter composite operation adds the pixel values of the new object to those of the existing content, resulting in a brighter image. This operation is particularly useful for creating lighting effects, such as highlighting or shadowing.

Copy

The copy composite operation simply replaces the existing canvas content with the new object. This operation is useful for creating simple, flat images, or for clearing the canvas before drawing a new image.

Xor

The xor composite operation displays the pixels of the new object that do not overlap with the existing content, and the pixels of the existing content that do not overlap with the new object. The result is a new image that is the exclusive OR of the two images.