title: How to use: globalCompositeOperation on multiple objects in JavaScript Canvas
body: <p>I'm attempting to create a circle menu in JavaScript canvas, something that would look similar to this:</p>
  <p><a href="https://i.stack.imgur.com/v0TyU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/v0TyU.png" alt="enter image description here" /></a></p>
  <p>Here is the code I'm using:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let canvas = document.querySelector("#canvas");
  canvas.width = 500;
  canvas.height = 500;
  let ctx = canvas.getContext("2d");
  
  ctx.fillStyle = "rgba(0,0,0,.45)"; // color
  let circlePath = [];
  let centerCircle = new Path2D();
  
  for (let t = 0; t &lt; 8; t++) {
    circlePath[t] = new Path2D();
    circlePath[t].moveTo(250, 250);
    circlePath[t].arc(
      250,
      250,
      190,
      Math.PI * 2 * 0.125 * t,
      Math.PI * 2 * 0.125 * t + Math.PI * 2 * 0.1175
    );
    circlePath[t].closePath();
    ctx.fill(circlePath[t]);
  }
  
  ctx.fillStyle = "#fff";
    centerCircle.moveTo(250, 250);
    centerCircle.arc(250,250,100,0,2*Math.PI);
    ctx.fill(centerCircle);
    
  
  canvas.addEventListener("mousemove", function (event) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (let t = 0; t &lt; 8; t++) {
      if (ctx.isPointInPath(circlePath[t], event.offsetX, event.offsetY)) {
        ctx.fillStyle = "blue";
      } else {
        ctx.fillStyle = "rgba(0,0,0,.45)";
      }
      ctx.fill(circlePath[t]);
    }
  
    
    ctx.fillStyle = "#fff";
    centerCircle.moveTo(250, 250);
    centerCircle.arc(250,250,100,0,2*Math.PI);
    //ctx.globalCompositeOperation = "destination-out";
    ctx.fill(centerCircle);
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#canvas {
              border: 1px solid #000;
              background: green;
          };</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas id="canvas"&gt;&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>The problem I am having is that when I try to use <code>ctx.globalCompositeOperation = &quot;destination-out&quot;;</code> to &quot;punch out&quot; a hole in the midle of the arcs using the white circle, it makes all of the objects disappear.</p>
  <p>Thank you in advance for any input provided.</p>