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



Globalcompositeoperation property in html5 canvas

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

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

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

Browser Support for globalCompositeOperation Property in HTML5 Canvas:

Yes 9.0 Yes Yes Yes

Related Searches to accept Attribute in html