HTML5 Game - Canvas Composite Operations

Introduction

The following code shows the usage of possible composite operation available with the HTML5 canvas API.

Demo

<html>
    <head>
        <style>        
            body > div {
                width: 680px;
                height: 430px;
                border: 1px solid black;
                float: left;
                overflow: hidden;
            }/*from  w  w w  . j a  v a  2 s .c o m*/
            
            canvas {
                float: left;
                margin-top: 30px;
            }
            
            div {
                font-size: 11px;
                font-family: verdana;
                height: 15px;
                float: left;
                width: 160px;
            }
            
            body > div > div:nth-of-type(4n+1) {
                margin-left: 40px;
            }
                        
                    
        </style>
        <script>
            window.onload = function(){
                let squareWidth = 55;
                let circleRadius = 35;
                let rectCircleDistX = 50;
                let rectCircleDistY = 50;
                
                // define an array of composite operations
                let 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 (let n = 0; n < operationArray.length; n++) {
                    let thisOperation = operationArray[n];
                    let canvas = document.getElementById(thisOperation);
                    let 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();
                }
            };
        </script>
    </head>
    <body>
        <div>
            <canvas id="source-atop" width="160" height="90">
            </canvas>
            <canvas id="source-in" width="160" height="90">
            </canvas>
            <canvas id="source-out" width="160" height="90">
            </canvas>
            <canvas id="source-over" width="160" height="90">
            </canvas>
            <div>
                source-atop
            </div>
            <div>
                source-in
            </div>
            <div>
                source-out
            </div>
            <div>
                source-over
            </div>
            <canvas id="destination-atop" width="160" height="90">
            </canvas>
            <canvas id="destination-in" width="160" height="90">
            </canvas>
            <canvas id="destination-out" width="160" height="90">
            </canvas>
            <canvas id="destination-over" width="160" height="90">
            </canvas>
            <div>
                destination-atop
            </div>
            <div>
                destination-in
            </div>
            <div>
                destination-out
            </div>
            <div>
                destination-over
            </div>
            <canvas id="lighter" width="160" height="90">
            </canvas>
            <canvas id="xor" width="160" height="90">
            </canvas>
            <canvas id="copy" width="160" height="90">
            </canvas>
            <canvas width="160" height="90">
            </canvas>
            <div>
                lighter
            </div>
            <div>
                xor
            </div>
            <div>
                copy
            </div>
        </div>
    </body>
</html>

Note

We can set a composite operation by using the globalCompositeOperation property of the canvas context:

context.globalCompositeOperation=[value];

The globalCompositeOperaton property accepts one of the eleven values, including

source-atop
source-in
source-out
source-over
destination-atop
destination-in
destination-out
destination-over
lighter
xor
copy.

Source refers to everything after the operation, and destination refers to objects before the operation.

The default composite operation is source-over.

It means that the new drawn is on top of the stuff already there.

HTML5 Game - Canvas Composite Operations

Introduction

Demo

Note

Related Topics