JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="first" width="300" height="300"></canvas>
<canvas id="second" width="300" height="300"></canvas>
<div id="output">

</div>

CSS

canvas {
  position: absolute;
}

JavaScript

var first = document.getElementById('first');
var second = document.getElementById('second');
var output = document.getElementById('output');

var pass = false;

first.addEventListener('mousedown', function(e) {
	output.innerHTML = "first";
});

second.addEventListener('mousedown', function(e) {
  pass = !pass;
	if (pass) {
    var fields = ['screenX', 'screenY', 'clientX', 'clientY',
    							'ctrlKey', 'altKey', 'shiftKey', 'metaKey',
                  'button', 'buttons', 'relatedTarget', 'region'];
    var opts = {};
    fields.forEach(function(f) {
    	if (f in e) {
      	opts[f] = e[f];
      }
    });
    var copy = new MouseEvent(e.type, opts);
    first.dispatchEvent(copy);
  } else {
  	output.innerHTML = "second";
  }
});