title: Getting infinity after operation on image data
body: <p>I'm new to javascript, and now I'm learning to work with canvas. I wanted to make a simple check of how many times my image will fit in my canvas, but for some reason every time I run this script after refreshing the page, 'wbok' and 'wdol' are "infinity" - but it only happens once in Firefox, twice in a row in Chrome when I checked, every other time I run the script without refreshing (it's a function called by onclick) I get the proper result of the division.</p>
  
  <pre><code>var c = document.getElementById('canvas').getContext('2d');
  var myimg = new Image();
  myimg.src = 'myimg.png';
  var wbok = canvas.width / myimg.width;
  var wdol = canvas.height / myimg.height;
  console.log(wbok, wdol);
  </code></pre>
  
  <p>I suspect it's something to do with how the image is loaded on to canvas, but I can't figure out the specifics and how to fix it. I also tried putting onload function before and after setting image source:</p>
  
  <pre><code>myimg.onload = function() {
      c.drawImage(myimg, 0,0);
  }
  </code></pre>
  
  <p>Still the same problem.</p>