Download canvas as an image and pdf

Just one click...

by Yamini Sontakke

HTML

<script src="http://mrrio.github.io/jsPDF/dist/jspdf.debug.js"></script>
<canvas width="500" height="300" id="canvas">Sorry, no canvas available</canvas>
<a id="download">Download as image</a>
<a id="downloadpdf">Download as pdf</a>

CSS

body {
	    background-color:#555557;
	    padding:0;
	    margin:0;
	    overflow:hidden;
	    font-family:sans-serif;
	    -webkit-user-select: none;
	    -khtml-user-select: none;
	    -moz-user-select: none;
	    -ms-user-select: none;
	    user-select: none;
	}
	canvas {
	    border:1px solid #000;
	    float:left;
	    clear:both;
	}
	#download, #downloadpdf {
	    float:left;
	    cursor:pointer;
	    color:#ccc;
	    padding:3px;
	}
	#download:hover, #downloadpdf:hover {
	    color:#fff;
	}
	/*
	div, input {
	    font-size:16px;
	    font-family:sans-serif;
	    border:1px solid #000;
	    border-radius: 5px;
	    float:left;
	    padding:5px;
	    width:50px;
	    margin:1px 1px;
	    background-color:#bbb;
	}
	input[type='text'] {
	    font-size:16px;
	    font-weight:bold;
	    width:70px;
	    text-align:center;
	    background-color:#fff;
	    padding-bottom:4px;
	}
	input[type='button'] {
	    font-size:16px;
	    font-weight:bold;
	    width:110px;
	    text-align:center;
	    background-color:#333;
	    color:#eee;
	    padding-bottom:4px;
	}
	input[type='button']:hover {
	    background-color:#fff463;
	    color:#000;
	}
	input[type='range'] {
	    width:100px;
	    margin:0 0 0 10px;
	}
*/

JavaScript

/**
 *    Ken Fyrstenberg Nilsen
 *    Abidas Software
*/

/** 
* nowSave and savePdf are custom functions by ulmdesign - mediamaster.eu 
**/
var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d');

/**
 * Demonstrates how to download a canvas an image with a single
 * direct click on a link.
 */
function doCanvas() {
    /* draw something */
    ctx.fillStyle = '#f90';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = '#fff';
    ctx.font = '60px sans-serif';
    ctx.fillText('Code Project', 10, canvas.height / 2 - 15);
    ctx.font = '26px sans-serif';
    ctx.fillText('Click link below to save this as image', 15, canvas.height / 2 + 35);
}

/**
 * This is the function that will take care of image extracting and
 * setting proper filename for the download.
 * IMPORTANT: Call it from within a onclick event.
*/
function downloadCanvas(link, canvasId, filename) {
    link.href = document.getElementById(canvasId).toDataURL();
    link.download = filename;
}

/** 
 * The event handler for the link's onclick event. We give THIS as a
 * parameter (=the link element), ID of the canvas and a filename.
*/

function nowSave(){
    var namefile = prompt("insert name of file to save in png");
    if(namefile === "") {
        alert("You must enter name of file")
    } else {    
    downloadCanvas(document.getElementById("download"), 'canvas', namefile + ".png");
    }
}
function savePDF(){
		 try {
			canvas.getContext('2d');
			var imgData = canvas.toDataURL("image/jpeg", 1.0);
		    var pdf = new jsPDF('p', 'mm', [297, 210]);
		    pdf.addImage(imgData, 'JPEG', 5, 5);
		    var namefile = prompt("insert name of file");
		    pdf.save(namefile + ".pdf");
		 } catch(e) {
			 alert("Error description: " + e.message);
		 }
		 
	}
document.getElementById('download').addEventListener('click', nowSave, false);
document.getElementById('downloadpdf').addEventListener('click', savePDF, false);
/**
 * Draw something to canvas
...