HTMLCanvasElement.mozGetAsFile()

Example: Using mozGetAsFile()

HTML snippet:

<canvas id="canvas" width="100" height="100"></canvas>
<p><a href="#" id="link">Click here to try out mozGetAsFile().</a></p>

The following code uses mozGetAsFile to create a File object from the canvas and appends it as an image to the page using FileReader.readAsDataURL():

function draw() {
   var canvas = document.getElementById('canvas');
   var ctx = canvas.getContext('2d');
   ctx.fillStyle = 'rgb(200, 0, 0)';
   ctx.fillRect(10, 10, 55, 50);
   ctx.fillStyle = 'rgba(0, 0, 200, 0.5)';
   ctx.fillRect(30, 30, 55, 50);
   var link = document.getElementById('link');
   link.addEventListener('click', copy);
}
function copy() {
  var canvas = document.getElementById('canvas');
  var f = canvas.mozGetAsFile('test.png');
  var reader = new FileReader();
  reader.readAsDataURL(f);
  reader.onloadend = function() {
    var newImg = document.createElement('img');
    newImg.src = reader.result;
    document.body.appendChild(newImg);
  }
}
window.addEventListener('load', draw);