title: How to change a function that has references to objects in a previous scope
body: <p>I would like to replace the code of a function but it has references inside another scope. I'm not sure I'm using the correct terminology so this is better explained by the code.</p>
  
  <pre><code>RenderEngineWebGL = (function () {
  //code that creates textCanvas somewhere here
      re.createTextTexture = function(textureId, fontName, 
            size, color, text, outlineSize, outlineColor) {
  ...
  ...
      var ctx = textCanvas.getContext('2d');
      ctx.save();
      ctx.font = fontString;
      ctx.textBaseline = 'top';
      }
  ...
  return re;
  }());
  </code></pre>
  
  <p>I tried to just edit this by changing RenderEngineWebGL.createTextTexture to how I want the function to work.</p>
  
  <pre><code>RenderEngineWebGL.createTextTexture = function(textureId, fontName, 
            size, color, text, outlineSize, outlineColor) {
      ...
      ...
      console.log(text);//Whatever I Want
      size = 50;        //to change here
  
  
      var ctx = textCanvas.getContext('2d');
      ctx.save();
      ctx.font = fontString;
      ctx.textBaseline = 'top';
      }
  </code></pre>
  
  <p>This won't work because textCanvas is not defined outside of that scope. I've temporarily solved this by using a chrome extension and replacing the whole code with my code, but when the code is updated I have to manually put these edits back in.</p>
  
  <p>textCanvas is not the only problem, so finding that canvas will not help. There are other references that cause errors that I did not include.</p>
  
  <p>If I were able to edit this function without having to replace all of the code in the rest of the script then the only time I would need to update it is when the part that I changed has changed.</p>
  
  <p>How can I change a function that has references to objects like textCanvas?</p>