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
What is composition in HTML5 Canvas?
HTML5 Canvas composition refers to how new shapes are drawn in relation to existing content on the canvas. The globalCompositeOperation property controls how newly drawn shapes combine with existing pixels.
What is globalCompositeOperation?
The globalCompositeOperation property determines the blending mode for new shapes. It affects transparency, layering, and how colors mix when shapes overlap.
Syntax
context.globalCompositeOperation = "operation-type";
Common Composition Types
There are 12 main composition operations that control how new shapes interact with existing canvas content:
| Operation | Description |
|---|---|
source-over |
Default. New shapes drawn on top of existing content |
source-in |
New shapes drawn only where they overlap existing content |
source-out |
New shapes drawn only where they don't overlap existing content |
destination-over |
New shapes drawn behind existing content |
Complete Example
This example demonstrates all composition operations by drawing a red rectangle first, then a blue circle with different 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 rectangle (existing content)
ctx.fillStyle = "#FF3366";
ctx.fillRect(15,15,70,70);
// Set composite operation
ctx.globalCompositeOperation = compositeTypes[i];
// Draw circle (new content)
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>
Key Points
- source refers to new shapes being drawn
- destination refers to existing content on the canvas
-
source-overis the default behavior (new content on top) - Composition operations affect the entire drawing context until changed
Conclusion
Canvas composition operations provide powerful control over how shapes blend and interact. Use globalCompositeOperation to create masking effects, transparency blending, and complex visual compositions.
347 Views
