html tutorial - globalCompositeOperation Property in HTML5 Canvas - html5 - html code - html form

Learn html - html tutorial - Globalcompositeoperation property in html5 canvas - html examples - html programs

The globalCompositeOperation is a property of <canvas> element in composition.
The globalCompositeOperation property sets how a source image are drawn onto a destination image.
source image = drawings are about to place onto the canvas.
destination image = drawings are already placed onto the canvas.

Syntax for globalCompositeOperation Property in HTML5 Canvas:

context.globalCompositeOperation="source-in";

Property values for globalCompositeOperation Property in HTML5 Canvas:

Values	Description
source-over	Shows the source image over the destination image.
source-atop	Shows the source image on top of the destination image. The part of the source image that is outside the destination image is not displayed.
source-in	Shows the source image in to the destination image. Only the part of the source image that is INSIDE the destination image is displayed, and the destination image is transparent
source-out	Shows the source image out of the destination image. Only the part of the source image that is OUTSIDE the destination image is displayed, and the destination image is transparent
destination-over	Shows the destination image over the source image
destination-atop	Shows the destination image on top of the source image.
destination-in	Shows the destination image in to the source image.
destination-out	Shows the destination image out of the source image.
lighter	Shows the source image + the destination image
copy	Shows the source image. The destination image is ignored
xor	The source image is grouped by using an exclusive OR with the destination image

Sample Coding for globalCompositeOperation Property in HTML5 Canvas:

Tryit<!DOCTYPE html>
<html>
    <head>
        <title>wikitechy-globalCompositeOperation Property in canvas</title>
    </head>
    <body>
        <h1>wikitechy-globalCompositeOperation Property in canvas</h1>
        <canvas id="wikitechyCanvas" width="300" height="180" 
                style="border:2px solid red;">
        </canvas>
        <script>
            var gco = document.getElementById("wikitechyCanvas");
            var gcox = canvas.getContext("2d");
            gcox.fillStyle = "blue";
            gcox.fillRect(30, 30, 75, 50);
            gcox.fillStyle = "green";
            gcox.globalCompositeOperation = "source-over";
            gcox.fillRect(50, 50, 75, 50);
            gcox.fillStyle = "blue";
            gcox.fillRect(60, 60, 75, 50);
            gcox.fillStyle = "green";
            gcox.globalCompositeOperation = "destination-over";
            gcox.fillRect(50, 50, 75, 50);
        </script>
    </body>
</html>

Code Explanation for globalCompositeOperation Property in HTML5 Canvas:

globalCompositeOperation Property in HTML5 Canvas Code Explanation

“Wikitechy canvas” is used to define the value id attribute for canvas element.
The getElementById() method is used to get the canvas element that has the id attributes with the specified value.
gco.getContext(“2d”) method is returns a two-dimensional drawing context on the canvas.
gcox.fillstyle() method is used to set the color to fill the drawing.
gcox.fillRect() method is used to draws a "filled" rectangle (30, 30, 85, 60);
gcox.globalCompositeOperation=”source-over” displays the source image over the destination image.
gcox.globalCompositeOperation=”destination-over” displays the destination image over the source image.

Sample Output for globalCompositeOperation Property in HTML5 Canvas:

globalCompositeOperation Property in HTML5 Canvas Output

The canvas rectangle with green color border.
Blue rectangle displays the source image over green rectangle the destination image.
Green rectangle displays the destination image over blue rectangle the source image.