title: Html DrawCanvas is null
body: <p>I'm trying to duplicate my canvas but it throw me <strong>drawCanvas is null</strong> error. 
  Whenever i hit the button it throw me the error. Is there any other way i can duplicate my canvas?</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;Html&gt;
  &lt;Head&gt;
  &lt;Title&gt;Java Example&lt;/Title&gt;
  
          &lt;script type="text/javascript"&gt;
  {
  
  if (!window.Clipboard) {
     var pasteCatcher = document.createElement("apDiv1");
     pasteCatcher.setAttribute("contenteditable", "");
     pasteCatcher.style.opacity = 0;
     //document.body.appendChild(pasteCatcher);
     pasteCatcher.focus();
     document.addEventListener("click", function() { pasteCatcher.focus(); });
  } 
  
  //window.addEventListener("paste", onPasteHandler);
  
  function onPasteHandler(e)
  {
      if(e.clipboardData) {
          var items = e.clipboardData.items;
          if(!items){
              alert("Image Not found");
          }
          for (var i = 0; i &lt; items.length; ++i) {
          if (items[i].kind === 'file' &amp;&amp; items[i].type === 'image/png') {
              var blob = items[i].getAsFile(),
                  source = window.webkitURL.createObjectURL(blob);
  
              pastedImage = new Image();
              pastedImage.src = source;
  
              pasteData();
              }
          }
      }
  }
  
  function pasteData()
  {
      drawCanvas = document.getElementById('drawCanvas1');
      ctx = drawCanvas.getContext( '2d' );
      ctx.clearRect(0, 0, 640,480);
      ctx.drawImage(pastedImage, 0, 0);
  }
  
  function pasteData2()
  {
      drawCanvas = document.getElementById('drawCanvas1');
      ctx = drawCanvas.getContext( '2d' );
      ctx.clearRect(0, 0, 640,480);
      ctx.drawImage(pastedImage, 0, 0);
      image2 = convertCanvasToImage(drawCanvas);
      document.getElementById("canvasHolder").appendChild(image2);
  }
  
   // Converts image to canvas; returns new canvas element
              function convertImageToCanvas(image) {
              var canvas = document.createElement("canvas");
                  canvas.width = image.width;
                  canvas.height = image.height;
                  canvas.getContext("2d").drawImage(image, 0, 0);                
                  return canvas;
              }
  
              // Converts canvas to an image
              function convertCanvasToImage(canvas) {
                  var image = new Image();
                  image.src = canvas.toDataURL("image/png");
                  return image;
              }
  }
  
          &lt;/script&gt;
  &lt;style type="text/css"&gt;
  #apDiv1 {
      position:absolute;
      width:258px;
      height:165px;
      z-index:1;
      left: 71px;
      top: 59px;
  }
  &lt;/style&gt;
  &lt;/Head&gt;
  
  &lt;Body&gt;
  &lt;div id="apDiv1" contenteditable='true'&gt;Paste Test&lt;/div&gt;
  &lt;!--div id='div' contenteditable='true'&gt;Paste&lt;/div--&gt;
  &lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;
  &lt;button type="button" value="click me" onclick="return pasteData2();" /&gt;
  &lt;h2&gt;Canvas Image&lt;/h2&gt;
      &lt;p id="canvasHolder"&gt;
  
      &lt;/p&gt;
  &lt;/Body&gt;
  &lt;/Html&gt; 
  </code></pre>
  
  <p>Error
  <img src="https://i.stack.imgur.com/5G2r3.png" alt="enter image description here"></p>