title: How to save canvas on Right-Click dialog as jpg
body: <p>I'm using this code to capture images as canvas from a video <code>URL</code> in my site:</p>
  
  <pre><code>var videoId = 'video';
  var scaleFactor = 0.55; // increase or decrease size
  var snapshots = []; 
  /**
   * Captures a image frame from the provided video element.
   *
   * @param {Video} video HTML5 video element from where the image frame will be captured.
   * @param {Number} scaleFactor Factor to scale the canvas element that will be return. This is an optional parameter.
   *
   * @return {Canvas}
   */
  
  function capture(video, scaleFactor) {
      if(scaleFactor == null){
          scaleFactor = 1;
      }
  
      var w = video.videoWidth * scaleFactor;
      var h = video.videoHeight * scaleFactor;
      var canvas = document.createElement('canvas');
          canvas.width  = w;
          canvas.height = h;
      var ctx = canvas.getContext('2d');
          ctx.drawImage(video, 0, 0, w, h);
      var uniq = 'img_' + (new Date()).getTime();
      canvas.setAttribute('id', uniq);
  
    return canvas ;
  
  }
  
  /**
   * Invokes the &lt;code&gt;capture&lt;/code&gt; function and attaches the canvas element to the DOM.
   */
  function shoot(){
      var video  = document.getElementById(videoId);
      var output = document.getElementById('output');
      var canvas = capture(video, scaleFactor);
  
      snapshots.unshift(canvas);
      output.innerHTML = '' ;
  
      for(var i=0; i&lt;10; i++){
         output.appendChild(snapshots[i]);
  
      }
  }
  </code></pre>
  
  <p><strong>My two problems:</strong></p>
  
  <p>1 - Currently, browsers treat <code>&lt;canvas&gt;</code> like they they treat a <code>&lt;div&gt;</code> and this make it impossible to save any generated canvas as an image because when I <code>right-click</code> on each and everyone, it always opens the windows dialog here I have to choose <code>Save image as...</code>.</p>
  
  <p>2 - The windows <code>right-click</code> dialog always opens by default the option to save image as <code>transfer.png</code> and I would like to save the image with their <code>ID attribute</code> (<code>var uniq</code>) and a <code>jpg</code> extension.</p>
  
  <p><strong>Example of what I need:</strong></p>
  
  <p>The output canvas is like this: <code>&lt;canvas width="352" height="198" id="img_1575807516362"&gt;&lt;/canvas&gt;</code>.</p>
  
  <p>I want the <code>right-click</code> to open the windows dialog offering to save image like this <code>img_1575807516362.jpg</code>.</p>
  
  <p>Alternatively, it would be nice tho have a download button for each canvas to export the <code>canvas</code> as an image like this <code>transfer.jpg</code>.</p>
  
  <p>Is it possible to  make this work with this code?</p>