title: Propagate click events from canvas to div
body: <p>I am trying to combine fabricJS with Google Maps. What I've done is to lay a canvas over the map div to display shapes over the map.
  The problem is that google map events are not trigger anymore. I searched the internet for solutions and found the css tag <code>pointer-event</code> should propagate the click events to the underlying layers, but that didn't work for me.
  I also tried to add a event with <code>addDomListener</code>, but no luck also. The click event would trigger, but the <code>google.maps.event.trigger</code> didn't.</p>
  
  <p>I just started, so there is nothing fancy to see yet. I'm kind of new to web development, so I figured I ask here before wasting my time with something that is not possible.</p>
  
  <p>This is my html file:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Title&lt;/title&gt;
      &lt;style&gt;
          #holder {
              height:700px;
              width: 700px;
              position:relative;
  
          }
          #canvasholder{
              height: 700px;
              width: 700px;
              position: absolute;
          }
          html, body {
              height: 100%;
              margin: 0;
              padding: 0;
          }
          #map-canvas {
              position: absolute;
  
              height: 700px;
              width: 700px;
              z-index: -1;
          }
          #canvas{
              position: absolute;
              height: 700px;
              widht: 700px;
              pointer-events: none;
              opacity: 1;
              z-index: 1;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"&gt;&lt;/script&gt;
  &lt;div id="holder"&gt;
      &lt;div id="canvasholder"&gt;
          &lt;canvas id="canvas"&gt;&lt;/canvas&gt;
      &lt;/div&gt;
      &lt;div id="map-canvas"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAJ4aYR2NFbLLzh_tkya-rE40gCl-hPpLc&amp;callback=initMap"
          async defer&gt;&lt;/script&gt;
  &lt;script src="./app.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And my Javascript file:</p>
  
  <pre><code>var map;
  var canvas;
  function initMap() {
      map = new google.maps.Map(document.getElementById('map-canvas'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 8
      });
      google.maps.event.addDomListener(document.getElementById("canvasholder").firstElementChild, "click", function(e){
          google.maps.event.trigger(map, "click", e);
      })
      canvas = new fabric.Canvas("canvas");
      canvas.setHeight(700);
      canvas.setWidth(700);
      canvas.setBackgroundColor('', canvas.renderAll.bind(canvas));
      canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));
  }
  </code></pre>