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);