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:

- “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:

- 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.
Browser Support for globalCompositeOperation Property in HTML5 Canvas:
![]() |
![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|
Yes | 9.0 | Yes | Yes | Yes |