title: Getting drawing image from canvas to flask
body: <p>I'm writing a small Flask app to recognize handwritten digits (0-9). I wrote almost all the elements (machine learning model, web app, etc.) but I'm having a problem capturing an image (drawn using Canvas) like:</p>
  
  <p><a href="https://i.stack.imgur.com/Emfik.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Emfik.png" alt="enter screen from app here"></a></p>
  
  <p>I would like to get the image and save it to a temp file. I know Python but I've never used JavaScript, which is necessary for using Canvas.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;form method="post"  action="{{url_for('main.image')}}"&gt;
      &lt;button name="img" onclick="drawDataURIOnCanvas();"&gt;Get png&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>function InitThis() {
          ....
      }
  
   function Draw(x, y, isDown) {
          ....
  
   function drawDataURIOnCanvas() {
  
        var element = document.createElement('a');
        element.setAttribute('href',  document.getElementById('Canvas').toDataURL('image/jpeg'));
        element.setAttribute('download', 'chart.jpeg');
        element.style.display = 'none';
        document.body.appendChild(element);
        element.click();
  
      }
  </code></pre>
  
  <p>Function <code>drawDataURIOnCanvas()</code> saves the image using <em>browser save manager</em>, but I would like to save it to temp files and use the image later. </p>