Trigger an event to call a function that's inside of a closure
<p>I'm working on a project based on a nice little <a href="http://www.williammalone.com/projects/html5-canvas-javascript-drawing-app-with-bucket-tool/" rel="nofollow">sample canvas drawing app</a> someone else on the project downloaded and modified. We need to allow the user to click a button elsewhere on the page (not part of the canvas), and have it run a function that came with the sample app. However, the function is inside of a closure. Since I can't call the function directly (right? the closure prevents this? I don't often work with closures), I thought I'd be able to accomplish this by triggering a mouse event at the location the user would click to accomplish the same thing. It's not working, and I don't know why not.  </p>

<p>I posted a greatly simplified version at <a href="https://jsfiddle.net/gkvdha3h/2/" rel="nofollow">this fiddle</a>. Simple HTML code:</p>

<pre><code>&lt;div id="canvasDiv"&gt;&lt;/div&gt;
&lt;div id="buttonDiv"&gt;
  &lt;button&gt;why can't I send a click to the canvas?&lt;/button&gt;
&lt;/div&gt;
</code></pre>

<p>And the simplified version of the downloaded sample app, plus my attempt to use jQuery's <code>.trigger</code> method to trigger the event:</p>

<pre><code>var WM = {};

WM.drawingApp = function(options) {
  "use strict";
  var canvas, context,
    // Add mouse and touch event listeners to the canvas
    createUserEvents = function() {
      var getElementPos = function(element) {
        // straight-forward stuff removed for brevity's sake
        return pos;
      };
      var press = function(e) {
        // Mouse down location
        var sizeHotspotStartX, toolIndex,
          mouseX = (e.changedTouches ? e.changedTouches[0].pageX : e.pageX),
          mouseY = (e.changedTouches ? e.changedTouches[0].pageY : e.pageY);

        var elementPos = getElementPos(document.getElementById(options.canvasElementId || 'canvasDiv'));
        mouseX -= elementPos.x;
        mouseY -= elementPos.y;
        announce(mouseX, mouseY);
      };
      var announce = function(x,y) { alert('press at: ' + x + ', ' + y); }
      // Add mouse event listeners to canvas element
      canvas.addEventListener("mousedown", press, false);
    },
    // Creates a canvas element, etc
    init = function() {
      // Create the canvas 
      canvas = document.createElement('canvas');
      canvas.setAttribute('width', 100);
      canvas.setAttribute('height', 100);
      canvas.setAttribute('id', 'canvas');
      document.getElementById(options.canvasElementId || 'canvasDiv').appendChild(canvas);
      context = canvas.getContext("2d"); // Grab the 2d canvas context
      createUserEvents();
    };
  init();
  return {};
};

jQuery(document).ready(function() {
  jQuery('#buttonDiv').on('click', 'button', function() {
    var down = jQuery.Event("mousedown", {
      pageX: 50,
      pageY: 50
    });
    jQuery('#canvasDiv canvas').trigger(down);
  });
});
</code></pre>

<p>As you can see by running the fiddle, if you click inside the box, you get an alert announcing where you clicked. But if you click the button, you don't get an alert. While writing this question, it occurred to me that maybe jQuery's <code>.trigger</code> method isn't a sufficient way to send the click. Its documentation page specifically says that <code>.trigger</code> "does not perfectly replicate a naturally-occurring event". We're open to solutions that don't involve jQuery.</p>