title: html2canvas generates image url, but url variable cannot be accessed outside of local scope
body: <p>I am using html2canvas and I have not had any issues until now. I have a div which overflows vertically, but I want to capture all the content of the div by "stitching" the images generated by html2canvas together. These image "pieces" will together form the whole overflow contents. My test function (called on a button click) looks like this:</p>
  
  <pre><code>function canvasTest() {
      document.getElementById("myTestDiv").style.display = "block";
      html2canvas($("#myCanvasDiv"), {
          onrendered: function(canvas) {
              var myImage = canvas.toDataURL("image/png");
              document.getElementById("myTestDiv").innerHTML = '&lt;img src="' + myImage + '" alt="img"&gt;';
              alert(myImage);
          }
      });
  }
  </code></pre>
  
  <p>Briefly, the contents of #myCanvasDiv are fed into the innerHTML of myTestDiv and this works fine. However, for a vertically-overflowing #myCanvasDiv, I want to push multiple image URLs into an array, then use the contents of this array to serve as the src elements for several images that together, will be the "stitched" innerHTML of myTestDiv. However, the var myImage in the function above cannot even be taken out of the <code>function(canvas)</code> block of code. It has scope local to <code>function(canvas)</code> only, because as soon as either the innerHTML or alert is taken out of the <code>function(canvas)</code>:</p>
  
  <pre><code>function canvasTest() {
      document.getElementById("myTestDiv").style.display = "block";
      html2canvas($("#myCanvasDiv"), {
          onrendered: function(canvas) {
              var myImage = canvas.toDataURL("image/png");
              document.getElementById("myTestDiv").innerHTML = '&lt;img src="' + myImage + '" alt="img"&gt;';
          }
      });
      alert(myImage);
  }
  </code></pre>
  
  <p>Chrome throws an error that <code>myImage</code> is not defined. I tried returning the value of myImage as follows: </p>
  
  <pre><code>function canvasTest() {
      document.getElementById("myTester").style.display = "block";
      html2canvas($("#SampleSolutionAppendSpace"), {
          onrendered: function(canvas) {
              var myImage = canvas.toDataURL("image/png");
              document.getElementById("myTester").innerHTML = '&lt;img src="' + myImage + '" alt="img"&gt;';
              (function () {
                  return myImage;
              })();
          }
      });
      alert(myImage);
  }
  </code></pre>
  
  <p>I also tried making the return function a variable:</p>
  
  <pre><code>function canvasTest() {
      document.getElementById("myTester").style.display = "block";
      html2canvas($("#SampleSolutionAppendSpace"), {
          onrendered: function(canvas) {
              var myImage = canvas.toDataURL("image/png");
              document.getElementById("myTester").innerHTML = '&lt;img src="' + myImage + '" alt="img"&gt;';
              var pleezWork = function () {
                  return myImage;
              };
          }
      });
      alert(pleezWork);
  }
  </code></pre>
  
  <p>But still I cannot access the variables local to <code>function(canvas)</code></p>
  
  <p>How can I access <code>var myImage</code> outside of the <code>function(canvas)</code> scope?</p>