title: How to get Canvas DataURL on img.onload event when I click on submit button?
body: <p>I want to save the canvas as image on the server, I have a button to submit. When I click on save button I called a function that get the canvas dataURL on <code>img.onload</code> event. The problem is <code>img.onload</code> is fired after submitting the form, so I can't get dataURL value until it gets back from server. </p>
  
  <p>Here's my code :</p>
  
  <pre><code> &lt;input onclick="savepoint('same');" id="btnsave" type="submit" value="Save Eyes Coordinate" /&gt;
  </code></pre>
  
  
  
  <pre><code>function savepoint(btn) {
  
      SavePreviewImg();
  }
  
  function SavePreviewImg() {
      //Other code here to get the image src and other stuff..
  
      // here the excution of the function doesn't go into onload event it skip it
      // and after the click event finished it comes to onload event
      img.onload = function () {
          ctx.clearRect(0, 0, canvas.width, canvas.height);
          // here i draw the first image
          ctx.drawImage(img, 480, 320);//210,10
  
          // here i draw the second image and put it on the first
          //image 
          ctx.save();
          ctx.translate(mx, my);
          ctx.rotate(angle * TO_RADIANS);
          ctx.drawImage(imge2, -(width / 2), -(height / 2), width, height);
  
          ctx.restore();
  
          //get img data url
          dataURL = canvas.toDataURL("image/png");//.replace(/^data:image\/(png|jpg);base64,/, "");
      }
  }
  </code></pre>