A Pen by Jose Luis Quintana.

Download-Canvas-Example.markdown

Download Canvas Example

How to save an image from canvas.

A Pen by Jose Luis Quintana on CodePen.

License.

index.html

<h1>Download Canvas</h1>

<div id="container">
  <canvas id="canvas" width="200" height="200"></canvas>
  <button id="btndownload">Download</button>
</div>

script.js

// Initializing
window.onload = function(){
  var dwn = document.getElementById('btndownload'),
      canvas = document.getElementById('canvas'),
      context = canvas.getContext('2d');

  // Drawing a circle
  var centerX = canvas.width / 2;
  var centerY = canvas.height / 2;
  var radius = 70;
  context.beginPath();
  context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
  context.fillStyle = 'rgba(0,200,0, .7)';
  context.fill();
  context.lineWidth = 2;
  context.strokeStyle = 'black';
  context.stroke();
  
  // Drawing a rect
  context.beginPath();
  context.rect(10, 50, 100, 100);
  context.fillStyle = 'rgba(255,255,0, .7)';
  context.fill();
  context.lineWidth = 2;
  context.strokeStyle = 'black';
  context.stroke();

  // Event handler for download
  dwn.onclick = function(){
    download(canvas, 'myimage.png');
  }

}


// Source from:  http://stackoverflow.com/questions/18480474/how-to-save-an-image-from-canvas

/* Canvas Donwload */
function download(canvas, filename) {
  /// create an "off-screen" anchor tag
  var lnk = document.createElement('a'),
      e;

  /// the key here is to set the download attribute of the a tag
  lnk.download = filename;

  /// convert canvas content to data-uri for link. When download
  /// attribute is set the content pointed to by link will be
  /// pushed as "download" in HTML5 capable browsers
  lnk.href = canvas.toDataURL("image/png;base64");

  /// create a "fake" click-event to trigger the download
  if (document.createEvent) {
    e = document.createEvent("MouseEvents");
    e.initMouseEvent("click", true, true, window,
                     0, 0, 0, 0, 0, false, false, false,
                     false, 0, null);

    lnk.dispatchEvent(e);
  } else if (lnk.fireEvent) {
    lnk.fireEvent("onclick");
  }
}

style.css

h1 {
  text-align: center;
}
#container {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  text-align: center;
}
#canvas {
  border: solid 1px gray;
  margin-bottom: 10px;
  display: block;
}