JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.12.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.6.2/pixi.min.js"></script>
<div id="main" class="full-dim">
  <div id="root" class="full-dim">
    <div id="events" class="full-dim"></div>
    <canvas id="draw" class="full-dim"></canvas>
  </div>
  <div id="root2" class="full-dim">
    <div id="events2" class="full-dim"></div>
    <canvas id="draw2" class="full-dim"></canvas>
  </div>
  <div id="root3" class="full-dim">
    <div id="events3" class="full-dim"></div>
    <canvas id="draw3" class="full-dim"></canvas>
  </div>
  <div id="root4" class="full-dim">
    <div id="events4" class="full-dim"></div>
    <canvas id="draw4" class="full-dim"></canvas>
  </div>
</div>

CSS

.full-dim {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#root, #root2, #root3, #root4{
  width: 50%;
  height: 50%;
}

#root2 {
  left: 50%;
}

#root3 {
  top: 50%;
}

#root4 {
  top: 50%;
  left: 50%;
}

#events {
  z-index: -1;
  background: rgba(255,0,0,0.5);
}

#events2 {
  z-index: 1;
  background: rgba(0,255,0,0.5);
}

#events3 {
  z-index: 1;
  background: rgba(0,0,255,0.5);
}

#events4 {
  z-index: 1;
  background: rgba(255,0,255,0.5);
}

#canvas, #canvas2, #canvas3, #canvas4 {
  z-index: 2;
}

JavaScript

// Works as expected
const canvas1 = document.getElementById('draw');
const events1 = document.getElementById('events');
// All but click events are registerted
const canvas2 = document.getElementById('draw2');
const events2 = document.getElementById('events2');
// Click events are registerted when re-firing pointerdown and pointer up events
const canvas3 = document.getElementById('draw3');
const events3 = document.getElementById('events3');
// Reconstruct click event
const canvas4 = document.getElementById('draw4');
const events4 = document.getElementById('events4');

const clone = e => new e.constructor(e.type, e);
const log = e => console.log(e.type);
const logClickUp = e => console.log('CLICK', e.type);

const setUp = (canvas, events, duplicate, reconstruct) => {
  let mousedown = false;
	const forward = (e) => { canvas.dispatchEvent(clone(e)); };
  const forwardClick = (e) => {
    const down =  new event.constructor('pointerdown', e);
    const up =  new event.constructor('pointerup', e);
    canvas.dispatchEvent(down);
    canvas.dispatchEvent(up);
  };
  const forwardDown = (e) => { mousedown = true; forward(e); };
  const forwardUp = (e) => {
    forward(e);
    if (mousedown) logClickUp(e);
    mousedown = false;
  };
  const dim = canvas.getBoundingClientRect();
  const app = new PIXI.Application(dim.width, dim.height, {
    transparent: true,
    view: canvas
  });

  // create a new Sprite from an image path
  const bunny = new PIXI.Sprite.fromImage('http://pixijs.io/examples/required/assets/basics/bunny.png')

  // center the sprite's anchor point
  bunny.anchor.set(0.5);

  // move the sprite to the center of the screen
  bunny.x = app.renderer.width / 2;
  bunny.y = app.renderer.height / 2;

  bunny.interactive = true;
  bunny
    .on('click', logClickUp)
    .on('mousedown', log)
    .on('mouseover', log)
    .on('mouseout', log)
    .on('mouseup',  log)
    .on('contextmenu', log);

  app.stage.addChild(bunny);

	if (duplicate) {
	 ...