Set global Composite Operation
Description
How to do shape composite on HTNL5 Canvas
Example
<!DOCTYPE HTML>
<html>
<head>
<style>
div {<!-- ww w .ja v a2 s . com-->
width: 680px;
height: 430px;
border: 1px solid black;
float: left;
overflow: hidden;
}
canvas {
float: left;
margin-top: 30px;
}
</style>
<script>
window.onload = function(){
var squareWidth = 55;
var circleRadius = 35;
var rectCircleDistX = 50;
var rectCircleDistY = 50;
// define an array of composite operations
var operationArray = [];
operationArray.push("source-atop"); // 0
operationArray.push("source-in"); // 1
operationArray.push("source-out"); // 2
operationArray.push("source-over"); // 3
operationArray.push("destination-atop"); // 4
operationArray.push("destination-in"); // 5
operationArray.push("destination-out"); // 6
operationArray.push("destination-over"); // 7
operationArray.push("lighter"); // 8
operationArray.push("xor"); // 9
operationArray.push("copy"); // 10
// draw each of the eleven operations
for (var n = 0; n < operationArray.length; n++) {
var thisOperation = operationArray[n];
var canvas = document.getElementById(thisOperation);
var context = canvas.getContext("2d");
// draw rectangle
context.beginPath();
context.rect(40, 0, squareWidth, squareWidth);
context.fillStyle = "blue";
context.fill();
// set the global composite operation
context.globalCompositeOperation = thisOperation;
// draw circle
context.beginPath();
context.arc(40 + rectCircleDistX, rectCircleDistY, circleRadius, 0, 2 * Math.PI, false);
context.fillStyle = "red";
context.fill();
context.font = "8px sans-serif";
context.fillText(thisOperation, 40, 100);
}
};
</script>
</head>
<body>
<div>
<canvas id="source-atop" width="160" height="120">
</canvas>
<canvas id="source-in" width="160" height="120">
</canvas>
<canvas id="source-out" width="160" height="120">
</canvas>
<canvas id="source-over" width="160" height="120">
</canvas>
<canvas id="destination-atop" width="160" height="120">
</canvas>
<canvas id="destination-in" width="160" height="120">
</canvas>
<canvas id="destination-out" width="160" height="120">
</canvas>
<canvas id="destination-over" width="160" height="120">
</canvas>
<canvas id="lighter" width="160" height="120">
</canvas>
<canvas id="xor" width="160" height="120">
</canvas>
<canvas id="copy" width="160" height="120">
</canvas>
<canvas width="160" height="120">
</canvas>
</div>
</body>
</html>