How to use HTML5 Canvas Global Composite Operations

This article describe about HTML5 Canvas Global Composite Operations.
  • 2855

HTML5 Canvas Global Composite Operations

We can perform composite operation in HTML5 Canvas by using the globalCompositeOperation property of the canvas context. The globalCompositeOperation defines the composite operation between the source and destination states of the canvas. destination indicate the canvas state preceding a composite operation, source is indicate as the canvas state composite operation.

We can perform several composite operations.

Syntax

<script>

    context.globalCompositeOperation = 'destination-over';

</script>

 

Example: 

<!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>

 

Output

HTML5 Canvas global composite operation pic4.jpg

You may also want to read these related articles Click here

Ask Your Question 

Got a programming related question? You may want to post your question here

Programming Answers here

© 2020 DotNetHeaven. All rights reserved.