HTML5 Canvas Tutorial: composite operations

Canvas Composite Operations

To perform a composite operation on a HTML5 canvas, we can make use of the globalCompositeOperation of the canvas context. The two components that are involved in a composite operation, are the destination (which is already on the canvas) and the source (which is what is going to be drawn on the canvas). The composite is the result of the composite operation on the destination and the source. There are a total of 11 possible composite operations: source-atop, source-in, source-out, source-over, destination-atop, destination-in, destination-out, destination-over, lighter, xor, and copy

context.globalCompositeOperation=[value];

Example 1: Composite operations on a HTML5 Canvas. See image 1.

<!doctype html>
<html>
<head>
<title>Composite operations op HTML5 Canvas.</title>
<script> 
 function makeComposite(){ 
    var rectWidth = 55; 
    var circleRadius = 35; 
	var circleX = 40; 
    var circleY = 40; 
    var rectX = 0; 
    var rectY = 40; 
  
    var operationArray = new Array(); 
    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 all 11 operations
    for (var n = 0; n < operationArray.length; n++) { 
        var Operation = operationArray[n]; 
  
        var canvas = document.getElementById(Operation); 
        var context = canvas.getContext("2d"); 
 		 
		 // Draw cirkel (the destination)
        context.beginPath(); 
        context.arc(circleX, circleY, circleRadius, 0, 2 * Math.PI, false); 
        context.fillStyle = "#f16529"; 
        context.fill(); 
		 
       //Define the composite operation
       context.globalCompositeOperation = Operation; 

        // Draw a rectangle (the source)
        context.beginPath(); 
        context.rect(circleX + rectX, rectY, rectWidth, rectWidth); 
        context.fillStyle = "#000"; 
        context.fill(); 
      } 
};
    window.addEventListener("load", makeComposite, true);
</script>
</head>
<body>	

  <canvas id="source-atop" style="border: 1px solid;" width="100" height="100"></canvas>
  <canvas id="source-in" style="border: 1px solid;" width="100" height="100"></canvas>
  <canvas id="source-out" style="border: 1px solid;" width="100" height="100"></canvas>
  <canvas id="source-over" style="border: 1px solid;" width="100" height="100"></canvas>
  <canvas id="destination-atop" style="border: 1px solid;" width="100" height="100"></canvas>
  <canvas id="destination-in" style="border: 1px solid;" width="100" height="100"></canvas>
  <canvas id="destination-out" style="border: 1px solid;" width="100" height="100"></canvas>
  <canvas id="destination-over" style="border: 1px solid;" width="100" height="100"></canvas>
  <canvas id="lighter" style="border: 1px solid;" width="100" height="100"></canvas>
  <canvas id="xor" style="border: 1px solid;" width="100" height="100"></canvas>
  <canvas id="copy" style="border: 1px solid;" width="100" height="100"></canvas>

</body>
</html>
Composite operations op HTML5 Canvas.
Image 1. Composite operations on a HTML5 Canvas.

Check this example in your browser

Leave a comment