Next »
1033/1956
« Previous

Do shape composite in JavaScript

Description

The following code shows how to do shape composite.

Example


<!--from  ww  w .  j  a va  2 s  .  c o m-->
<!DOCTYPE HTML>
<html>
<head>
<style>
div {
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>

Click to view the demo

The code above generates the following result.

Do shape composite in JavaScript
Next »
« Previous