Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Composition attribute in HTML5 Canvas?
HTML5 Canvas provides the globalCompositeOperation property that controls how new shapes are drawn on top of existing shapes. This property determines the compositing behavior when overlapping occurs.
Syntax
context.globalCompositeOperation = "composite-operation";
Available Composite Operations
The globalCompositeOperation property accepts several values that define different blending modes:
- source-over (default): New shapes are drawn on top
- source-in: New shapes are drawn only where they overlap existing content
- source-out: New shapes are drawn only where they don't overlap
- destination-over: New shapes are drawn behind existing content
- lighter: Colors are added together for brighter results
- copy: Only new shapes are shown, existing content is erased
Example: Demonstrating All Composite Operations
<!DOCTYPE HTML>
<html>
<head>
<script>
var compositeTypes = [
'source-over','source-in','source-out','source-atop',
'destination-over','destination-in','destination-out',
'destination-atop','lighter','darker','copy','xor'
];
function drawShape(){
for (i = 0; i < compositeTypes.length; i++){
var label = document.createTextNode(compositeTypes[i]);
document.getElementById('lab'+i).appendChild(label);
var ctx = document.getElementById('tut'+i).getContext('2d');
// Draw red rectangle first
ctx.fillStyle = "#FF3366";
ctx.fillRect(15,15,70,70);
// Set composite operation
ctx.globalCompositeOperation = compositeTypes[i];
// Draw blue circle on top
ctx.fillStyle = "#0066FF";
ctx.beginPath();
ctx.arc(75,75,35,0,Math.PI*2,true);
ctx.fill();
}
}
</script>
</head>
<body onload="drawShape();">
<table border="1" align="center">
<tr>
<td>
<canvas id="tut0" width="125" height="125"></canvas><br/>
<label id="lab0"></label>
</td>
<td>
<canvas id="tut1" width="125" height="125"></canvas><br/>
<label id="lab1"></label>
</td>
<td>
<canvas id="tut2" width="125" height="125"></canvas><br/>
<label id="lab2"></label>
</td>
</tr>
<tr>
<td>
<canvas id="tut3" width="125" height="125"></canvas><br/>
<label id="lab3"></label>
</td>
<td>
<canvas id="tut4" width="125" height="125"></canvas><br/>
<label id="lab4"></label>
</td>
<td>
<canvas id="tut5" width="125" height="125"></canvas><br/>
<label id="lab5"></label>
</td>
</tr>
<tr>
<td>
<canvas id="tut6" width="125" height="125"></canvas><br/>
<label id="lab6"></label>
</td>
<td>
<canvas id="tut7" width="125" height="125"></canvas><br/>
<label id="lab7"></label>
</td>
<td>
<canvas id="tut8" width="125" height="125"></canvas><br/>
<label id="lab8"></label>
</td>
</tr>
<tr>
<td>
<canvas id="tut9" width="125" height="125"></canvas><br/>
<label id="lab9"></label>
</td>
<td>
<canvas id="tut10" width="125" height="125"></canvas><br/>
<label id="lab10"></label>
</td>
<td>
<canvas id="tut11" width="125" height="125"></canvas><br/>
<label id="lab11"></label>
</td>
</tr>
</table>
</body>
</html>
Simple Example: Comparing Two Operations
<!DOCTYPE HTML>
<html>
<body>
<canvas id="canvas1" width="150" height="150" style="border:1px solid #000;"></canvas>
<canvas id="canvas2" width="150" height="150" style="border:1px solid #000;"></canvas>
<script>
// First canvas - source-over (default)
var ctx1 = document.getElementById('canvas1').getContext('2d');
ctx1.fillStyle = 'red';
ctx1.fillRect(20, 20, 80, 80);
ctx1.globalCompositeOperation = 'source-over';
ctx1.fillStyle = 'blue';
ctx1.fillRect(60, 60, 80, 80);
// Second canvas - source-in
var ctx2 = document.getElementById('canvas2').getContext('2d');
ctx2.fillStyle = 'red';
ctx2.fillRect(20, 20, 80, 80);
ctx2.globalCompositeOperation = 'source-in';
ctx2.fillStyle = 'blue';
ctx2.fillRect(60, 60, 80, 80);
</script>
</body>
</html>
Common Use Cases
- source-over: Default layering for normal drawing
- destination-out: Creating cut-out effects or erasing
- lighter: Creating glow or light blend effects
- source-in: Clipping new content to existing shapes
Conclusion
The globalCompositeOperation property provides powerful control over how shapes blend and interact on HTML5 Canvas. Understanding these operations enables advanced visual effects and precise control over layering behavior.
Updated on: 2026-03-15T23:18:59+05:30
300 Views
Advertisements