JavaScript Canvas globalCompositeOperation Tutorial
last modified April 3, 2025
This tutorial explores the Canvas globalCompositeOperation property in JavaScript. It controls how new drawings are composited with existing canvas content. Mastering this property enables advanced visual effects and blending modes.
Basic Definition
globalCompositeOperation determines how shapes and images are drawn onto canvas. It affects the blending between new content and existing pixels. The property accepts various string values that define different compositing operations.
Common operations include 'source-over' (default), 'multiply', 'screen', 'overlay', and 'destination-out'. Each creates unique visual effects by combining source and destination pixels differently.
Basic source-over Example
This example demonstrates the default 'source-over' compositing operation.
<!DOCTYPE html>
<html>
<head>
<title>Source-over Example</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Draw blue rectangle
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 100);
// Draw red rectangle with default source-over
ctx.fillStyle = 'red';
ctx.globalCompositeOperation = 'source-over';
ctx.fillRect(100, 100, 100, 100);
</script>
</body>
</html>
This example first draws a blue rectangle, then a red rectangle overlapping it. The default 'source-over' operation makes the red rectangle appear on top.
The new drawing (source) is placed over existing content (destination). This is the standard behavior when drawing to canvas without explicit compositing.
destination-over Example
This example shows how 'destination-over' places existing content over new drawings.
<!DOCTYPE html>
<html>
<head>
<title>Destination-over Example</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Draw blue rectangle
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 100);
// Draw red rectangle with destination-over
ctx.fillStyle = 'red';
ctx.globalCompositeOperation = 'destination-over';
ctx.fillRect(100, 100, 100, 100);
</script>
</body>
</html>
Here we first draw a blue rectangle, then set 'destination-over' before drawing red. This makes the existing blue rectangle appear on top of the new red one.
'destination-over' is useful when you want to draw behind existing content. It's often used for creating background effects or watermark-like visuals.
multiply Example
This example demonstrates the 'multiply' blending mode which darkens colors.
<!DOCTYPE html>
<html>
<head>
<title>Multiply Example</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Draw yellow rectangle
ctx.fillStyle = 'yellow';
ctx.fillRect(50, 50, 100, 100);
// Draw blue rectangle with multiply
ctx.fillStyle = 'blue';
ctx.globalCompositeOperation = 'multiply';
ctx.fillRect(100, 100, 100, 100);
</script>
</body>
</html>
This example first draws a yellow rectangle, then a blue one with 'multiply'. The overlapping area becomes green (yellow × blue = green in RGB color model).
'multiply' multiplies the color channels of source and destination. It's great for creating shadow effects or simulating transparent colored filters.
screen Example
This example shows the 'screen' operation which lightens colors.
<!DOCTYPE html>
<html>
<head>
<title>Screen Example</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Draw red rectangle
ctx.fillStyle = 'red';
ctx.fillRect(50, 50, 100, 100);
// Draw green rectangle with screen
ctx.fillStyle = 'green';
ctx.globalCompositeOperation = 'screen';
ctx.fillRect(100, 100, 100, 100);
</script>
</body>
</html>
Here we draw a red rectangle, then a green one with 'screen' operation. The overlapping area becomes yellow (red + green = yellow in additive mixing).
'screen' inverts, multiplies, and inverts again, producing a lighter result. It's useful for creating glow effects or simulating light beams overlapping.
destination-out Example
This example demonstrates 'destination-out' which erases existing content.
<!DOCTYPE html>
<html>
<head>
<title>Destination-out Example</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Draw blue rectangle
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 200, 100);
// Erase part with destination-out
ctx.globalCompositeOperation = 'destination-out';
ctx.beginPath();
ctx.arc(150, 100, 50, 0, Math.PI * 2);
ctx.fill();
</script>
</body>
</html>
This example first draws a blue rectangle, then uses 'destination-out' with a circle. The circle acts as an eraser, creating a hole in the rectangle.
'destination-out' shows destination content only where source doesn't overlap. It's commonly used for creating masks or cutting out shapes from existing drawings.
Source
MDN globalCompositeOperation Documentation
This tutorial covered essential globalCompositeOperation modes with practical examples. Experimenting with these operations can greatly enhance your canvas graphics capabilities and visual effects.
Author
List all JS Canvas tutorials.