Rotate your phone or change to desktop for better experience

Rotate your phone or change to desktop for better experience

9. Program to Demonstrate Source-Over, Source-in, and Source-Out properties for composition using HTML Canvas.

kiri August 08, 2023


<!DOCTYPE html>

<html>

<style>

canvas {

  border: 1px solid grey;

  margin: 5px;

}

</style>

 

<body>

<h1>HTML5 Canvas</h1>

<h2>The globalCompositeOperation Property</h2>

 

<script>

const 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");

 

for (let n = 0; n < gco.length; n++) {

  document.write("<div id='p_" + n + "' style='float:left;'>" + gco[n] + ":<br>");

  const canvas = document.createElement("canvas");

  canvas.width = 120;

  canvas.height = 100;

  document.getElementById("p_" + n).appendChild(canvas);

  const ctx = canvas.getContext("2d"); 

  ctx.fillStyle = "blue";

  ctx.fillRect(10, 10, 50, 50);

  ctx.globalCompositeOperation = gco[n];

  ctx.beginPath();

  ctx.fillStyle = "red";

  ctx.arc(50, 50, 30, 0, 2 * Math.PI);

  ctx.fill();

  document.write("</div>");

}</script>

 

</body>

</html>

Post a Comment

0 Comments