JSFiddle - React, Tailwind, and code Playground

HTML

<canvas style="z-index: 20;"></canvas>
<div id="a"></div>

CSS

canvas{
    width: 200px;
    height: 200px;
    border: 1px solid black;
    display: block;
  /*  pointer-events: none; 
    */
    top:0px;
    position: absolute;
    margin-left: 10px;
}
#a{
    width: 100px;
    height: 100px;
    background-color:red;
    position:absolute;
    top:20px;
    z-index: 10;
    margin: 0 auto;
}

JavaScript

var evts = [ 'click', 'mousedown', 'mouseup', 'dblclick'],
          canvases = $('canvas');

$.each(evts, function(_, event){
  canvases.bind(event, function(evt){
     var target,
         pEvent;
     $(this).hide();
     target = document.elementFromPoint(evt.clientX, evt.clientY); 
     $(this).show();
     pEvent = $.Event(event);
     pEvent.target = target;
     pEvent.data = evt.data;
     pEvent.currentTarget = target;
     pEvent.pageX = evt.pageX;
     pEvent.pageY = evt.pageY;
     pEvent.result = evt.result;
     pEvent.timeStamp = evt.timeStamp;
     pEvent.which = evt.which;
     $(target).trigger(event, pEvent);
   });
});   

$('div').mousedown(function(e){
    if(e.which == 3){
        alert('right click');
    }
}).dblclick(function(){
  alert('double click');  
});