Menu
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

HTML Canvas Compositing


The globalCompositeOperation Property

The globalCompositeOperation property sets the type of compositing operation to apply when drawing new shapes. In the previous chapters new drawings have been placed on top of each other. We can decide what to do with new shades with the globalCompositeOperation property.

Let's look at some examples!


The "source-over" Value

The "source-over" value is default. It will draw new shapes on top of the existing content.

Example

Set globalCompositeOperation property to "source-over". Then draw two overlapping rectangles:

Your browser does not support the HTML5 canvas tag.
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.globalCompositeOperation = "source-over";

// Draw two overlapping rectangles
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);
ctx.fillStyle = "red";
ctx.fillRect(40, 40, 100, 100);
</script>
Try it Yourself »

The "source-out" Value

The "source-out" value will draw new shapes only where it does not overlap the existing content.

Example

Set globalCompositeOperation property to "source-out". Then draw two overlapping rectangles:

Your browser does not support the HTML5 canvas tag.
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.globalCompositeOperation = "source-out";

// Draw two overlapping rectangles
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);
ctx.fillStyle = "red";
ctx.fillRect(40, 40, 100, 100);
</script>
Try it Yourself »

The "destination-over" Value

The "destination-over" value will draw new shapes behind the existing content.

Example

Set globalCompositeOperation property to "destination-over". Then draw two overlapping rectangles:

Your browser does not support the HTML5 canvas tag.
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.globalCompositeOperation = "destination-over";

// Draw two overlapping rectangles
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);
ctx.fillStyle = "red";
ctx.fillRect(40, 40, 100, 100);
</script>
Try it Yourself »


The "destination-atop" Value

The "destination-atop" value will keep the existing content where it overlaps the new shape. The new shape is drawn behind the existing content.

Example

Set globalCompositeOperation property to "destination-atop". Then draw two overlapping rectangles:

Your browser does not support the HTML5 canvas tag.
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.globalCompositeOperation = "destination-atop";

// Draw two overlapping rectangles
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);
ctx.fillStyle = "red";
ctx.fillRect(40, 40, 100, 100);
</script>
Try it Yourself »

The "lighter" Value

The "lighter" value will result in a brighter color where both shapes overlap.

Example

Set globalCompositeOperation property to "lighter". Then draw two overlapping rectangles:

Your browser does not support the HTML5 canvas tag.
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.globalCompositeOperation = "lighter";

// Draw two overlapping rectangles
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);
ctx.fillStyle = "red";
ctx.fillRect(40, 40, 100, 100);
</script>
Try it Yourself »

The "copy" Value

The "copy" value will result in that only the new shape is shown.

Example

Set globalCompositeOperation property to "copy". Then draw two overlapping rectangles:

Your browser does not support the HTML5 canvas tag.
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.globalCompositeOperation = "copy";

// Draw two overlapping rectangles
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);
ctx.fillStyle = "red";
ctx.fillRect(40, 40, 100, 100);
</script>
Try it Yourself »

The "xor" Value

The "xor" value will result in that shapes are transparent where both overlap, and drawn normal everywhere else.

Example

Set globalCompositeOperation property to "xor". Then draw two overlapping rectangles:

Your browser does not support the HTML5 canvas tag.
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.globalCompositeOperation = "xor";

// Draw two overlapping rectangles
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);
ctx.fillStyle = "red";
ctx.fillRect(40, 40, 100, 100);
</script>
Try it Yourself »

The "multiply" Value

The "multiply" value will result in a darker picture. Multiplies the pixels of the top layer with the pixels of the bottom layer.

Example

Set globalCompositeOperation property to "multiply". Then draw two overlapping rectangles:

Your browser does not support the HTML5 canvas tag.
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.globalCompositeOperation = "multiply";

// Draw two overlapping rectangles
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);
ctx.fillStyle = "red";
ctx.fillRect(40, 40, 100, 100);
</script>
Try it Yourself »

The "screen" Value

The "screen" value will result in a lighter picture. Invert the pixels, then multiply, and inverted again (opposite of "multiply").

Example

Set globalCompositeOperation property to "screen". Then draw two overlapping rectangles:

Your browser does not support the HTML5 canvas tag.
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.globalCompositeOperation = "screen";

// Draw two overlapping rectangles
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);
ctx.fillStyle = "red";
ctx.fillRect(40, 40, 100, 100);
</script>
Try it Yourself »

The "darken" Value

The "darken" value will result in a darker color where both shapes overlap (keeps the darkest pixels of both layers).

Example

Set globalCompositeOperation property to "darken". Then draw two overlapping rectangles:

Your browser does not support the HTML5 canvas tag.
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.globalCompositeOperation = "darken";

// Draw two overlapping rectangles
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);
ctx.fillStyle = "red";
ctx.fillRect(40, 40, 100, 100);
</script>
Try it Yourself »

The "lighten" Value

The "lighten" value will result in a lighter color where both shapes overlap (keeps the lightest pixels of both layers).

Example

Set globalCompositeOperation property to "lighten". Then draw two overlapping rectangles:

Your browser does not support the HTML5 canvas tag.
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.globalCompositeOperation = "lighten";

// Draw two overlapping rectangles
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);
ctx.fillStyle = "red";
ctx.fillRect(40, 40, 100, 100);
</script>
Try it Yourself »

The "hue" Value

The "hue" value adopts the hue of the top layer and preserves the luma and chroma of the bottom layer.

Example

Set globalCompositeOperation property to "hue". Then draw two overlapping rectangles:

Your browser does not support the HTML5 canvas tag.
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.globalCompositeOperation = "hue";

// Draw two overlapping rectangles
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);
ctx.fillStyle = "red";
ctx.fillRect(40, 40, 100, 100);
</script>
Try it Yourself »

The "luminosity" Value

The "luminosity" value adopts the luma of the top layer and preserves the hue and chroma of the bottom layer.

Example

Set globalCompositeOperation property to "luminosity". Then draw two overlapping rectangles:

Your browser does not support the HTML5 canvas tag.
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.globalCompositeOperation = "luminosity";

// Draw two overlapping rectangles
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);
ctx.fillStyle = "red";
ctx.fillRect(40, 40, 100, 100);
</script>
Try it Yourself »

The globalCompositeOperation Property Values

The globalCompositeOperation property can have the following values:

Value Description
source-over Default. Draws new shapes on top of the existing content
source-in Draws new shapes only where both the new shape and the existing content overlap. Everything else is made transparent
source-out Draws new shapes only where it does not overlap the existing content
source-atop Draws new shapes only where it does overlap the existing content
destination-over Draws new shapes behind the existing content
destination-in Keeps the existing content where both the new shape and existing content overlap. Everything else is made transparent
destination-out Keeps the existing content where it does not overlap the new shape
destination-atop Keeps the existing content where it overlaps the new shape. The new shape is drawn behind the existing content
lighter Result in a brighter color where both shapes overlap
copy Shows only the new shape
xor Shapes are transparent where both overlap and drawn normal everywhere else
multiply Multiplies the pixels of the top layer with the pixels of the bottom layer. A darker picture is the result
screen Invert the pixels, then multiply, and invert again. A lighter picture is the result (opposite of "multiply")
overlay A combination of multiply and screen. Dark parts of base layer is darker, and light parts is lighter
darken Keeps the darkest pixels of both layers
lighten Keeps the lightest pixels of both layers
color-dodge Divides the bottom layer by the inverted top layer
color-burn Divides the inverted bottom layer by the top layer, and then inverts the result
hard-light Like "overlay", but instead with the top layer and bottom layer swapped
soft-light A softer version of "hard-light"
difference Subtracts the bottom layer from the top layer - or the other way round - to always get a positive value
exclusion Like "difference", but with lower contrast
hue Adopts the hue of the top layer and preserves the luma and chroma of the bottom layer
saturation Adopts the chroma of the top layer and preserves the luma and hue of the bottom layer
color Adopts the hue and chroma of the top layer and preserves the luma of the bottom layer
luminosity Adopts the luma of the top layer and preserves the hue and chroma of the bottom layer

×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
sales@w3schools.com

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
help@w3schools.com

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.