HTML Canvas - Composting and Clipping

We generally draw shapes on each other in the Canvas element when there is a need to draw more than one shape. We can use globalCompositeOperation property to order the composite shapes and there is another property clip which helps us to hide the non-required parts from the constructed shapes. The properties are mentioned below

globalCompositeOperation − By using this property, we can mask off existing shapes, draw new shapes on the existing ones, and clear sections. The values accepted by this property are mentioned in the below table.

Source-over	Source-in	Source-out	Source-atop	destination-over	destination-in
destination-out	destination-atop	lighter	copy	xor	multiply
screen	overlay	darken	lighten	color-dodge	color-burn
hard-light	soft-light	difference	exclusion	hue	saturation
color	luminosity

Example

The following example implements the composting properties. The code is given below

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title> Composting </title>
   </head>
   <body onload="composting();">
      <canvas id="canvas" width="400" height="250" style="border: 1px solid black;"></canvas>
      <script>
         function composting() {
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');
            context.fillStyle = 'blue';
            context.fillRect(25, 25, 200, 200);
            context.fill();
            context.globalCompositeOperation = 'darken';
            context.fillStyle = 'purple';
            context.fillRect(125, 25, 200, 200);
            context.fill();
            context.fillStyle = 'yellow';
            context.fillRect(225, 25, 100, 200);
            context.fill();
         }
      </script>
   </body>
</html>

Output

The output returned by the above code is

Clipping is similar to building shapes in canvas element using paths but it acts like a mask that removes unwanted parts of the obtained shape. The method used to achieve clipping is given below

Clip() − This method turns the built path shape into a clipping path. It is generally used instead of the closePath() function which turns it into a clipping path rather than stroking or filling the path.

Example for clipping

The following code implements the clipping method for the canvas element.

<!DOCTYPE html>
<html lang="en">
   <head>
      <title> Clipping </title>
   </head>
   <body onload="clipping();">
      <canvas id="canvas" width="400" height="250" style="border: 1px solid black;"></canvas>
      <script>
         function clipping() {
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');
            context.fillStyle = 'skyblue';
            context.fillRect(0, 0, 400, 250);
            context.fill();
            context.beginPath();
            context.arc(200, 125, 100, 1 * Math.PI, 5 * Math.PI);
            context.fillStyle = 'orange';
            context.fill();
            context.clip();
         }
      </script>
   </body>
</html>

Output

The output for the above code formed is shown below −