title: Variable values aren't available for use after image.onload?
body: <p>I'm using Canvas to perform a couple of things on an image which is loaded/drawn using <code>image.onload</code> &amp; <code>context.drawImage</code> combo. I'm calculating the bounding size for scaling the images using a simple function which returns the values. I need those values for use at a later point in my code, but no matter what I do, I'm not able to assign the values to a variable. I'm also not able to access my Canvas's styleheight/stylewidth attributes after I assign it the calculated dimensions.</p>
  
  <p>Here's a pseudos ample of my code</p>
  
  <pre><code>$(document).ready(function(){
      //Canvas access, context reference etc here.
      //Since I'm assigning styles to the canvas on the fly, the canvas has no ht/wdt yet
  
      var dimes = '';
      var image = new Image();
      image.onload = function(){
          //Apply original image height/width as canvas height/width 'attributes'
          //(so that I can save the original sized image)
          //Check if the image is larger than the parent container
          //Calculate bounds if not
          //Apply calculated dimensions as 'style' height/width to the canvas, so that the image fits
          dimes = scaleImage(...);
  
          //Works!
          console.log(dimes);
  
          //Rest all code
      }
  
      image.src = '...';
  
      //Blank!!!
      console.log(dimes);
  
      //These all blank as well!!!
      jQuery('#mycanvas').height() / width() / css('height') / css('width');
      document.getElementById(canvas).style.height / .style.width / height / width;
  });
  </code></pre>
  
  <p>I need to access the calculated dimensions for a 'reset' kind of function, that resets my canvas with the drawn image to the calculated size.</p>