title: Is there any event in HTML5 canvas which tells that image has been drawn?
body: <p>I am using <code>&lt;input type='file' onchange="readURL(this)"/&gt;</code> control to upload image to my web service. Here I am using <code>canvas</code> to reduce image size. The code is working fine, but at first time when we try to upload image it sends blank image and at second attempt it sends first image. That means I need a event of canvas that tells me when image has been drawn on the canvas</p>
  
  <pre><code>function readURL(input) {
      if (input.files &amp;&amp; input.files[0]) {
          var canvas = document.getElementById('canvas1');
          var context = canvas.getContext('2d');
          var reader = new FileReader();
          reader.onload = function (e) {
              var imageObj = new Image();                  
              imageObj.onload = function () {
                  context.drawImage(imageObj, 0, 0, 300, 275);
              };
              imageObj.src = e.target.result.toString();
  
              $.ajax({
                   //My Web Service call code
              });                 
          }
          reader.readAsDataURL(input.files[0]);
      }
  }
  </code></pre>
  
  <p>So question is Is there any event in HTML5 canvas which tells that image has been drawn?</p>