Refer Tutorial
Demo of HTML5 Composite Operations
legend:The Destination Image is the Orange Rectangle and the source image is the Blue Circle. Learn more about each property from here
Source Over |
source-atop |
source-in |
source-out |
destination-over |
destination-atop |
destination-in |
destination-out |
Lighter |
copy |
darker |
xor |
How to draw multiple composite operations in a single Canvas
<canvas id="visibleCanvas" width="630" height="500"></canvas>
<canvas id="hiddenCanvas" width="630" height="500" style="display:none;"></canvas>
<script>
var canvas = document.getElementById('visibleCanvas');
var context = canvas.getContext('2d');
var hiddenCanvas = document.getElementById('hiddenCanvas');
var hiddenContext = hiddenCanvas.getContext('2d');
var sqWidth = 65;
var arcRad = 45;
var shapeOffset = 60;
var operationOffset = 160;
//Lets create an array to store all the operations and loop through it
var operations = [];
operations.push('source-atop');
operations.push('source-in');
operations.push('source-out');
operations.push('source-over');
operations.push('destination-atop');
operations.push('destination-in');
operations.push('destination-out');
operations.push('destination-over');
operations.push('lighter');
operations.push('darker');
operations.push('xor');
operations.push('copy');
// Give some room for the visibleCanvas with padding
context.translate(20, 20);
//Loops thru operations array to perform operations and paint it
for(var n = 0; n < operations.length; n++) {
var thisOperation = operations[n];
//Lets save the context to restore it later
hiddenContext.save();
//Before drawin in hiddenCanvas, lets clear the previous drawn image
hiddenContext.clearRect(0, 0, canvas.width, canvas.height);
//Now the destination image i.e., our rectangle has to be drawn
hiddenContext.beginPath();
hiddenContext.rect(0, 0, sqWidth, sqWidth);
hiddenContext.fillStyle = '#e37026';
hiddenContext.fill();
// Set the operation
hiddenContext.globalCompositeOperation = thisOperation;
//Now the source image to be drawn; ie., the circle
hiddenContext.beginPath();
hiddenContext.arc(shapeOffset, shapeOffset, arcRad, 0, 2 * Math.PI, false);
hiddenContext.fillStyle = '#0a518f';
hiddenContext.fill();
hiddenContext.restore();
//Lets also name the operations
hiddenContext.font = '10pt Times';
hiddenContext.fillStyle = 'black';
hiddenContext.fillText(thisOperation, 0, sqWidth + 55);
// Add translate to display the operations at the place intended
if(n > 0) {
if(n % 4 === 0) {
context.translate(operationOffset * -3, operationOffset);
}
else {
context.translate(operationOffset, 0);
}
}
//Copy the rendered output of the hiddenCanvas to visibleCanvas
context.drawImage(hiddenCanvas, 0, 0);
}
</script>