HTML5 Game - Canvas Using Composition

  1. HOME
  2. HTML5 Game
  3. Canvas
  4. Composite Operations

Introduction

We can use transparency in conjunction with the globalCompositeOperation property to compose shapes and text.

The allowed values for this property are described in the following table.

Value
 Description
copy
 Draw the source over the destination, ignoring any transparency
destination-atop
 Show the canvas
destination-in

 Same as source-in but using the destination image instead of the source image
and vice versa
destination-over

 Same as source-over but using the destination image instead of the source image
and vice versa
distination-out

 Same as source-out but using the destination image instead of the source image
and vice versa
lighter

 Display the sum of the source image and destination image, with color values
approaching 255 (100%) as a limit.
source-atop


 Display the source image wherever both images are opaque. Display the
destination image wherever the destination image is opaque but the source
image is transparent. Display transparency else where
source-in

 Display the source image wherever both the source image and destination image
are opaque. Display transparency else where.
source-out

 Display the source image wherever the source image is opaque and the
destination image is transparent. Display transparency else where
source-over

 Display the source image wherever the source image is opaque. Display the
destination image else where
xor
 Exclusive OR of the source image and destination image.

The following code shows how to use globalCompositeOperation property.

Demo

ResultView the demo in separate window 

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <style>
            canvas {border: thin solid black; margin: 4px;}
            body > * {float:left;}
        </style>
    </head>
    <body>
        <canvas id="canvas" width="300" height="120">
            Your browser doesn't support the <code>canvas</code> element
        </canvas>
        <label>Composition Value:</label><select id="list">
            <option>copy</option>
            <option>destination-atop</option><option>destination-in</option>
            <option>destination-over</option><option>distination-out</option>
            <option>lighter</option><option>source-atop</option>
            <option>source-in</option><option>source-out</option>
            <option>source-over</option><option>xor</option>
        </select>
        <script>
            let ctx = document.getElementById("canvas").getContext("2d");
            /*  ww  w . j a  v  a 2  s.  co m*/
            ctx.fillStyle = "lightgrey";
            ctx.strokeStyle = "black";
            ctx.lineWidth = 3;

            let compVal = "copy";
            
            document.getElementById("list").onchange = function(e) {
                compVal = e.target.value;
                draw();
            }

            draw();
            
            function draw() {
                ctx.clearRect(0, 0, 300, 120);
                ctx.globalAlpha = 1.0;
                ctx.font = "100px sans-serif";
                ctx.fillText("Hello", 10, 100);
                ctx.strokeText("Hello", 10, 100);       
                
                ctx.globalCompositeOperation = compVal;
                
                ctx.fillStyle = "red";
                ctx.globalAlpha = 0.5;
                ctx.fillRect(100, 10, 150, 100);
            }
        </script>
    </body>
</html>

Related Topic