title: How to copy a canvas to clipboard with enough time to build the canvas?
body: <p>I have a context menu, in which as User clicks the context menu button I start to render the html using <a href="https://github.com/niklasvh/html2canvas" rel="nofollow noreferrer">html2canvas</a> library, which returns a canvas using promise,</p>
  
  <pre><code>  function startCanvas(e) {
  
  
              CanvasPromise = html2canvas($TableDivCanvas.get(0), {
  
                  height: html2canvasHeight + 20,
                  width: html2canvasWidth + 20,
  
              });
  
  
          }
  </code></pre>
  
  <p>and when the the user clicks the copy option from the context menu, i have to upload the canvas returned from the promise to server, because if I put .dataurl() directly to image src, the copy command doesn't work (it returns false ).  I also tried providing a blob url as image src but that also didn't work.</p>
  
  <pre><code> $(document).on('click','.imageCopy',function(e){
  
              CanvasPromise.then(function (canvasElm) {
                      CanvasDataString = canvasElm.toDataURL("image/png", 1.0);
  
                      var urlHeading = Heading + Date.now() + ".png";
                      urlHeading = urlHeading.replace(/ +/g, "");
  
                      var formdata = new FormData();
                      formdata.append("base64image", CanvasDataString);
                      formdata.append("heading", urlHeading);
                      $.ajax({
                          url: "@Url.Action("SaveCanvas")",
                          type: "POST",
                          data: formdata,
                          processData: false,
                          contentType: false,
                          success: function (url) {
  
                          }   
  
                      });
                      url2 = document.location.origin + '/Upload/Images/' + urlHeading;
  
                      var img = document.createElement('img');
                      var div = document.createElement('div');
                      div.classList.add("CanvasimgDiv");
                      div.contentEditable = true;
  
                      div.appendChild(img);
                      img.src = url2;
                      document.body.appendChild(div);
  
  
                      try {
  
                          var selection = window.getSelection();
                          var range = document.createRange();
                          range.selectNodeContents($(".CanvasimgDiv").get(0));
                          selection.removeAllRanges();
                          selection.addRange(range);
                          var str = document.execCommand('copy');
                          console.log(str);
                          if (str == false) {
                              alert("Failed to copy image, Please close the menu and try again");
                          }
                          window.getSelection().removeAllRanges();
                          $('.CanvasimgDiv').remove();
                          $('.hiddClone').remove();
  
                      } catch (err) {
                          if (str == false) {
                              alert("Failed to copy image, Please close the menu and try again");
                          }
                          console.log(err);
                          $('.CanvasimgDiv').remove();
  
                      }
                  })
  </code></pre>
  
  <p>The only problem I am having here is about time, if html2canvas take's more than 1 sec to render the canvas, the copy command fails.   </p>