title: JS: wait for method done inside of function
body: <p>I'm not really familiar with JS and was confused with next task. </p>
  
  <p>I have remote form, but before sent data I need to do some action (fill form input with data). This is my code:</p>
  
  <pre><code>$('.edit_slide').on('ajax:beforeSend', function(event, xhr, settings) {
      html2canvas($('.slide_canvas'), {
        onrendered:
          function(canvas) {
              var img = canvas.toDataURL("image/png");
              $('#slide_thumbnail').val(img);
          }
      });
  }); 
  </code></pre>
  
  <p>Form ajax from: <a href="https://github.com/rails/jquery-ujs/wiki/ajax" rel="nofollow">https://github.com/rails/jquery-ujs/wiki/ajax</a> .</p>
  
  <p>Next I need to create image from DIV with html2canvas (<a href="http://html2canvas.hertzen.com/documentation.html" rel="nofollow">http://html2canvas.hertzen.com/documentation.html</a>) and pass it to server.</p>
  
  <p>But form sent first and html2canvas done after (form submited with blank #slide_thumbnail and fill it with data after).</p>
  
  <p>If I put here alert('hello') istead of html2canvas, alert works first and it's waiting for I press 'Ok' and form submited after.</p>
  
  <p>Is it possible to wait image was created and sent it after ?</p>