title: convert and upload by click
body: <p>there is a canvas with picture on it and a button.
   user clicks on a button and it gets converted to img and that image sent to <code>form</code> and upload to server by PHP, i've tried to write something, but this one is out of my abilities.</p>
  
  <p>how to do it? is there more easy way to solve the problem?</p>
  
  <pre><code>&lt;canvas id="canvas" width="400px" height="400px"&gt;HERE USER DRAW&lt; /canvas&gt;
  &lt;button onclick="to_image()"&gt;Draw to Image&lt; /button&gt;
  </code></pre>
  
  <p>here is to_image():</p>
  
  <pre><code>var canvas = document.getElementById("canvas");
  document.getElementById("theimage").src = canvas.toDataURL();
  var data = canvas.toDataURL('image/png');
  </code></pre>
  
  <p>i've tried to change button like this: </p>
  
  <pre><code>&lt;button type="submit" onclick="to_image()"&gt;Save&lt; /button&gt;
  </code></pre>
  
  <p>and created hidden input, to put that image there:</p>
  
  <pre><code>&lt;input type="file" name="file" id="file" style="visibility:hidden"/&gt;
  </code></pre>
  
  <p>finally change to_image() like:</p>
  
  <pre><code>document.getElementById("file").src = data;
  </code></pre>
  
  <p>still nothing happens, i'm new to javascript and php, so was a bit embarrassed to show code</p>