Propagate click events from canvas to div
<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>