YouTip

## HTML Canvas `globalCompositeOperation` Property The `globalCompositeOperation` property of the Canvas 2D API sets the type of compositing operation to apply when drawing new shapes. It determines how new shapes (the **Source**) are drawn relative to shapes that are already rendered on the canvas (the **Destination**). --- ## Understanding Source vs. Destination To work effectively with compositing, you must understand these two terms: * **Destination Image (Existing Content):** The drawings and pixels that are already rendered on the canvas. * **Source Image (New Content):** The new drawings, shapes, or images you are about to place onto the canvas. --- ## Syntax ```javascript context.globalCompositeOperation = "type"; ``` ### Property Value * **Type:** `String` * **Default Value:** `"source-over"` --- ## Property Values and Descriptions The following table details the standard compositing operations supported by modern browsers: | Value | Description | | :--- | :--- | | **`source-over`** | **Default.** Draws the source image over the destination image. | | **`source-atop`** | Draws the source image on top of the destination image. Only the portion of the source image that overlaps with the destination image is visible. | | **`source-in`** | Draws the source image only where it overlaps with the destination image. The destination image becomes completely transparent. | | **`source-out`** | Draws the source image only where it does *not* overlap with the destination image. The destination image becomes completely transparent. | | **`destination-over`** | Draws the destination image over the source image (the new shape is drawn behind the existing content). | | **`destination-atop`** | Draws the destination image on top of the source image. Only the portion of the destination image that overlaps with the source image is kept. | | **`destination-in`** | Draws the destination image only where it overlaps with the source image. The source image becomes completely transparent. | | **`destination-out`** | Draws the destination image only where it does *not* overlap with the source image. The source image becomes completely transparent. | | **`lighter`** | Displays the sum of the source image and destination image colors. Where they overlap, the color values are added, making the overlapping area lighter. | | **`copy`** | Displays only the source image. The destination image is completely cleared and ignored. | | **`xor`** | Combines the source and destination images using an exclusive OR (XOR) operation. Overlapping areas where both shapes are present become transparent. | --- ## Code Examples ### 1. Basic Usage: `source-over` vs. `destination-over` This example demonstrates the difference between the default `"source-over"` operation and `"destination-over"`. ```html ``` --- ### 2. Visualizing All Compositing Operations Dynamically You can programmatically generate and compare how different `globalCompositeOperation` values behave using a loop. In this example, the destination is a blue square, and the source is a red circle. ```html ``` --- ## Considerations & Best Practices 1. **State Restoration:** `globalCompositeOperation` is a global state property on the canvas context. Once you change it, all subsequent drawing operations will use this mode. It is highly recommended to wrap your compositing code block with `ctx.save()` and `ctx.restore()` to prevent unexpected side effects on other parts of your rendering pipeline: ```javascript ctx.save(); ctx.globalCompositeOperation = 'destination-out'; // Draw clipping/masking shapes here ctx.restore(); // Restores the default 'source-over' state ``` 2. **Performance:** Complex compositing operations (like blending modes or masking) require pixel-by-pixel calculations. While modern browsers optimize this via GPU acceleration, heavy use of these operations in high-frequency animation loops can impact performance. 3. **Browser Support:** All modern browsers (Chrome, Firefox, Safari, Edge, Opera) fully support the standard compositing operations. Legacy browsers like Internet Explorer 8 and below do not support the `` element.