globalCompositeOperation Property - Javascript Canvas Reference

Javascript examples for Canvas Reference:globalCompositeOperation

  1. HOME
  2. Javascript
  3. Canvas Reference
  4. globalCompositeOperation

Description

The globalCompositeOperation property sets or gets how a source image are drawn onto a existing image.

The source image is the drawings you are about to draw.

The destination image is the drawings that are already painted.

globalCompositeOperation Property's default value is source-over

JavaScript syntax 

context.globalCompositeOperation = "source-in";

Property Values

ValueDescription
source-over Default. Displays the source image over the destination image
source-atop Displays the source image on top of the destination image. The part of the source image that is outside the destination image is not shown
source-inDisplays the source image on to the destination image. The part of the source image that is inside the destination image is shown, and the destination image is transparent
source-out Displays the source image out of the destination image. The part of the source image that is outside the destination image is shown, and the destination image is transparent
destination-over Displays the destination image over the source image
destination-atop Displays the destination image on top of the source image. The part of the destination image that is outside the source image is not shown
destination-in Displays the destination image in to the source image. The part of the destination image that is inside the source image is shown, and the source image is transparent
destination-out Displays the destination image out of the source image. The part of the destination image that is outside the source image is shown, and the source image is transparent
lighter Displays the source image + the destination image
copy Displays the source image. The destination image is ignored
xor The source image is combined by using an exclusive OR with the destination image

Example

All the globalCompositeOperation property values:

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
canvas {/*from   w w w  .  ja va 2 s .co m*/
    border: 1px solid #d3d3d3;
    margin-right: 10px;
    margin-bottom: 20px;
}
</style>
</head>
<body>

<script>

var gco = new Array();
gco.push("source-atop");
gco.push("source-in");
gco.push("source-out");
gco.push("source-over");
gco.push("destination-atop");
gco.push("destination-in");
gco.push("destination-out");
gco.push("destination-over");
gco.push("lighter");
gco.push("copy");
gco.push("xor");

var n;
for (n = 0; n < gco.length; n++) {
    document.write("<div id='p_" + n + "' style='float:left;'>" + gco[n] + ":<br>");
    var c = document.createElement("canvas");
    c.width = 120;
    c.height = 100;
    document.getElementById("p_" + n).appendChild(c);
    var ctx = c.getContext("2d");
    ctx.fillStyle = "blue";
    ctx.fillRect(10, 10, 45, 45);
    ctx.globalCompositeOperation = gco[n];
    ctx.beginPath();
    ctx.fillStyle = "red";
    ctx.arc(50, 50, 40, 0, 2 * Math.PI);
    ctx.fill();
    document.write("</div>");
}

</script>

</body>
</html>

Related Tutorials