HTML5 Game - Canvas Shape Cutout Shapes

Description

Cutout Shapes
Demo

<!DOCTYPE html>
<html>
  <head>
    <title>Various Cutout Shapes</title>
    <style>
      body {/*w  ww. ja  v a 2  s  .c  om*/
         background: #efefef;
      }
      
      #canvas {
         background: #ffffff;
         box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
      }


      #canvas {
         margin: 10px;
      }
    </style>
  </head>

   <body>
      <canvas id='canvas' width='600' height='400'>
         Canvas not supported
      </canvas>

    <script>

let context = document.getElementById('canvas').getContext('2d');

function draw() {
   context.clearRect(0, 0, context.canvas.width,
                           context.canvas.height);


   context.save();

   context.shadowColor = 'grey';
   context.shadowOffsetX = 12;
   context.shadowOffsetY = 12;
   context.shadowBlur = 15;

   drawCutouts();
   strokeCutoutShapes();
   context.restore();
}

function drawCutouts() {
   context.beginPath();
   addOuterRectanglePath();

   addCirclePath();    
   addRectanglePath(); 
   addTrianglePath();   
   
   context.fill(); // Cut out shapes
}

function strokeCutoutShapes() {
   context.save();

   context.strokeStyle = 'rgba(0,0,0,0.7)';

   context.beginPath();
   addOuterRectanglePath();
   context.stroke();

   context.beginPath();
   addCirclePath();
   addRectanglePath();
   addTrianglePath();
   context.stroke();

   context.restore();
}

function rect(x, y, w, h, direction) {
  if (direction) { // CCW
      context.moveTo(x, y);
      context.lineTo(x, y + h);
      context.lineTo(x + w, y + h);
      context.lineTo(x + w, y);
      context.closePath(); 
  }
  else {
      context.moveTo(x, y);
      context.lineTo(x + w, y);
      context.lineTo(x + w, y + h);
      context.lineTo(x, y + h);
      context.closePath(); 
  }
}

function addOuterRectanglePath() {
   context.rect(110, 25, 370, 335); 
}

function addCirclePath() {
   context.arc(300, 300, 40, 0, Math.PI*2, true);
}

function addRectanglePath() {
   rect(310, 55, 70, 35, true); 
}

function addTrianglePath() {
   context.moveTo(400, 200);
   context.lineTo(250, 115);
   context.lineTo(200, 200);
   context.closePath();
}

context.fillStyle = 'blue';
draw();

      </script>
  </body>
</html>