<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#myownCanvas {
border: 1px solid #9C9898;
}
</style>
<script>
window.onload = function () {
var canvas = document.getElementById("myownCanvas");
var context = canvas.getContext("2d");
var tempCanvas = document.getElementById("tempCanvas");
var tempContext = tempCanvas.getContext("2d");
var squareWidth = 55;
var circleRadius = 35;
var startX = 10;
var startY = 30;
var rectCircleDistX = 50;
var rectCircleDistY = 50;
var exampleDistX = 150;
var exampleDistY = 140;
var arr = new Array();
arr.push("source stop");
arr.push("source in");
arr.push("source out");
arr.push("source over");
arr.push("destination stop");
arr.push("destination in");
arr.push("destination out");
arr.push("destination-over");
arr.push("lighter");
arr.push("darker");
arr.push("xor");
arr.push("copy");
// draw each of the ten operations
for (var i = 0; i < arr.length; i++) {
var thisX;
var thisY;
var thisOperation = arr[i];
// first row
if (i < 4) {
thisX = startX + (i * exampleDistX);
thisY = startY;
}
// second row
else if (i < 8) {
thisX = startX + ((i - 4) * exampleDistX);
thisY = startY + exampleDistY;
}
// third row
else {
thisX = startX + ((i - 8) * exampleDistX);
thisY = startY + (exampleDistY * 2);
}
tempContext.clearRect(0, 0, canvas.width, canvas.height);
// draw rectangle
tempContext.beginPath();
tempContext.rect(thisX, thisY, squareWidth, squareWidth);
tempContext.fillStyle = "yellow";
tempContext.fill();
// set global composite
tempContext.globalCompositeOperation = thisOperation;
// draw circle
tempContext.beginPath();
tempContext.arc(thisX + rectCircleDistX, thisY + rectCircleDistY, circleRadius, 0, 2 * Math.PI, false);
tempContext.fillStyle = "Gray";
tempContext.fill();
// set back to default
tempContext.globalCompositeOperation = "source-over";
tempContext.font = "10pt Verdana";
tempContext.fillStyle = "black";
tempContext.fillText(thisOperation, thisX, thisY + squareWidth + 45);
// copy drawing from tempCanvas onto myCanvas
context.drawImage(tempCanvas, 0, 0);
}
}
</script>
</head>
<body>
<canvas id="myownCanvas" width="578" height="430"></canvas>
<canvas id="tempCanvas" width="578" height="430" style="display:none;"></canvas>
</body>
</html>
|