Name: html5 canvas globalCompositionOperation example
Uploaded: 2024-03-31T03:52:00+00:00
Duration: T0H0M49S
Description: The demo video of setting different globalCompositionOperation values to see different overlapped shapes effect. You can see the article https://www.dev2qa.com/how-to-use-html5-canvas-globalcompositeoperation-property-with-examples/ to learn the source code.

This article will tell you how to use the Html5 canvas context object’s globalCompositeOperation property to implement shape or image composite operation with examples.

Table of Contents

1. How To Use Html5 Canvas globalCompositeOperation Property Example.

When you draw 2 overlapped shapes ( such as a rectangle, and a circle) on Html5 canvas, you can set the canvas context object’s globalCompositeOperation property to different values to make the composite figure with different effects.

The globalCompositeOperation properties value can be source-over, source-atop, source-in, source-out, destination-over, destination-atop, destination-in, destination-out, lighter, copy, xor.
When you assign a different option item value, you can see a different effect.
This example contains a select drop-down list that you can select different globalCompositeOperation values.

When you click the Shape Composition button, it will draw 2 overlapped shapes on the canvas below it, and you can see the different effects.
This example contains 2 source files, html5-canvas-composition.html, html5-canvas-composition.js.

html5-canvas-composition.html.

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Html5 Canvas Composition Examples</title>
<script type="text/javascript" src="html5-canvas-composition.js" charset="utf-8"></script>
<style>
canvas{
  display:none;
  margin-top:10px;
}
</style>
</head>
<body>
<h3>How To Use Html5 Canvas globalCompositeOperation Property With Examples.</h3>
<div>
    <label>Composition Option:</label>
    <select id="compositionOption">
       <option value="source-over">source-over</option>
       <option value="source-atop">source-atop</option>
       <option value="source-in">source-in</option>
       <option value="source-out">source-out</option>
       <option value="destination-over">destination-over</option>
       <option value="destination-atop">destination-atop</option>
       <option value="destination-in">destination-in</option>
       <option value="destination-out">destination-out</option>
       <option value="lighter">lighter</option>
       <option value="copy">copy</option>
       <option value="xor">xor</option>
    </select>    
    <input type="button" id="shape-composition-button" value="Shape Composition" onclick="shapeComposition('canvas1', 'compositionOption', this)" />
    <canvas id="canvas1"></canvas>
</div>
</body>
</html>

html5-canvas-composition.js.

var canvasWidth = 600;
var canvasHeight = 300;

function shapeComposition(canvasId, selectOptionsId, src){

    // Get the html canvas object.
    var canvas = document.getElementById(canvasId);
    
    if(canvas==null){
        alert("Can not find the html canvas element with element id " + canvasId);
        return false;
    }

    // Get the select drop-down list object.
    var selectOption = document.getElementById(selectOptionsId);
    if(selectOption==null){
        alert("Can not find the html select element with element id " + selectOptionsId);
        return false;
    }

    // Set the canvas width, height, background color, and display style.
    canvas.width = canvasWidth;
    canvas.height = canvasHeight;
    canvas.style.backgroundColor = 'yellow';
    canvas.style.display = 'block';

    ctx = canvas.getContext('2d');

    // Draw the first red rectangle.
    ctx.fillStyle = "red";
    ctx.fillRect(10, 10, 300, 100);

    // Get the drop-down list selected index.
    selectIndex = selectOption.selectedIndex;
    // Get the selected drop-down option.
    compositionOption = selectOption.options[selectIndex]
    // Get the choosed option value.
    ctx.globalCompositeOperation = compositionOption.value;

    
    // Draw the second green circle.
    ctx.beginPath();
    ctx.fillStyle = "green";
    ctx.arc(300, 100, 100, 0, Math.PI*2, true);
    ctx.fill();
    ctx.closePath();
}