HTML canvas globalCompositeOperation Property for all possible values

Introduction

All the globalCompositeOperation property values:

View in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
canvas {/*from www .j a v  a 2s.  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, 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>



PreviousNext

Related