title: html5 canvas javascript copy picture
body: <p>I have a html5 page. It uses JQuery and sketch.js (for free drawing). I am NOT going to connect it to any web server. At this moment, I would like to be use this javascript as desktop application. My purpose is to copy image from one canvas to the other canvas in the same page. After draw something by free hand, I could see url is copied to textarea, but no picture after clicking Show URL link. Could someone give me hints how to make an copy of image from one canvas to the other?  </p>
  
  <p>/1/ Source codes, one need to add html tag in the beginning, do not forget &lt;></p>
  
  <pre><code>&lt;head&gt;
   &lt;title&gt;sketch and free hand drawing&lt;/title&gt;
   &lt;!--[if IE]&gt;
     &lt;script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"&gt;
  &lt;/script&gt;
  &lt;![endif]--&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;meta http-equiv="Content-Type" content="image/png"/&gt;
  &lt;script src="js/jquery-1.11.0.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/sketch.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>/2/One need to add /head above. do not forget &lt;></p>
  
  <pre><code>&lt;body&gt;
  &lt;script&gt;
      function toDo(){
           console.log(document.getElementById("colors_sketch").toDataURL("image/png"));
         document.getElementById("cvs").value=document.getElementById("colors_sketch").toDataURL("image/png");
         document.getElementById("txt").value=document.getElementById("colors_sketch").toDataURL("image/png");
    }   
  &lt;/script&gt; 
  &lt;div class="tools"&gt;
     &lt;a href="#colors_sketch" data-download="png" style="float: right; width: 100px;"&gt;Download&lt;/a&gt;
  &lt;/div&gt;
  &lt;div class="tools"&gt;
     &lt;a href="#cvs" style="float: right; width: 100px;" onclick="toDo();"&gt;show URL&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;textarea id="txt"&gt;&lt;/textarea&gt;
  &lt;hr/&gt;
  &lt;canvas id="colors_sketch" width="800" height="300"&gt;hello&lt;/canvas&gt;
  &lt;hr/&gt;
  &lt;canvas id="cvs" width="800" height="300"&gt;&lt;/canvas&gt;
  &lt;script type="text/javascript"&gt;
     $(function() {
        $.each(['#f00', '#ff0', '#0f0', '#0ff', '#00f', '#f0f', '#000', '#fff'], function() {
          $('#colors_demo .tools').append("&lt;a href='#colors_sketch' data-color='" + this + "' style='width: 10px; background: " + this + ";'&gt;&lt;/a&gt; ");
        });
        $.each([3, 5, 10, 15], function() {
          $('#colors_demo .tools').append("&lt;a href='#colors_sketch' data-size='" + this + "' style='background: #ccc'&gt;" + this + "&lt;/a&gt; ");
        });
        $('#colors_sketch').sketch();
     });
  </code></pre>
  
  <p></p>
  
  <p>/3/ one need to add /script above and /body above and /html above do not forget &lt;></p>