title: Making JS local function globally accessible
body: <p>I have a function inside a function that I need to access directly.</p>
  
  <pre><code>//#############################################################
  //# Global vars
  //#############################################################
  var canvasWidth = 585;
  var canvasHeight = 780;
  
  //#############################################################
  //# Init the canvas
  //#############################################################
  window.onload = function() {
      initStage();
  };
  
  //#############################################################
  //# Init the main stage
  //#############################################################
  function initStage() {
  
      //*************************************************************
      //* Create a stage to work with
      //*************************************************************
      var stage = new Kinetic.Stage({
          container: "container",
          width: canvasWidth,
          height: canvasHeight
      });
  
      var layerOne = new Kinetic.Layer();
      var imageObj = new Image();
  
      //*************************************************************
      //* Load the image into a layer on the stage
      //*************************************************************
      ... Some Code ...
  
      //*************************************************************
      //* Set the hidden field value to the canvas dataURL
      //*************************************************************
      function autoSave(){
          stage.toDataURL({
              callback: function(dataUrl){
                  document.getElementById("mapping-form:hiddenDataURL").value = dataUrl;
                  console.log("Auto Save excecuted");
              }, 
              mimeType: 'image/jpeg', 
              quality: 1.0
          });        
      }
  
      //*************************************************************
      //* Function called to add text to the stage
      //*************************************************************
      ... Some Code ...    
  
          layerTwo.add(txt);
          stage.add(layerTwo);
  
      });
  
  }
  </code></pre>
  
  <p>I'm trying to access autoSave() (that in return requires the stage var from the parent function). I understand why I can't access it, but Im struggling to see how I can alter the code to make it accessible. </p>
  
  <p>My first thought was simply to declare a 'higher scoped' var and assign the function to it. The problem is (as far as I can see) that this doesn't actually allow me to execute the autoSave() at the requested time.</p>
  
  <p>Apologies for the 'basic natur of this question, I'm new to JS and I think this is going to be fundamental!</p>