dannvix · May 12, 2015 15:04
diff --git a/CanvasFileSystem.html b/CanvasFileSystem.html
 <!DOCTYPE html>
 <html>
 <head>
  <meta charset="utf-8">
  <title>HTML 5 Canvas & File System</title>
  <style>
    button,
    #canvas {
      cursor: pointer;
    }

    #canvas {
      border: 1px solid black;
    }
  </style>
 </head>
 <body>
  <div>
    <button type="button" id="btn-download">Download</button>
    <button type="button" id="btn-clear">Clear</button>
    <a href="#" id="link" target="_blank">Click me</a>
  </div>
  <hr>
  <canvas id="canvas" width="480" height="360" style="border:1px solid black;"></canvas>

  <script>
    (function(window) {
        var canvas = document.getElementById("canvas");
        var width = canvas.width, height = canvas.height;
        var ctx = canvas.getContext("2d");
        /*
         * enable drawing on canvas
         */
        // clear
        var btn_clear = document.getElementById("btn-clear");
        btn_clear.addEventListener("click", function() {
            ctx.clearRect(0, 0, width, height);
            console.log("clear");
        }, false);
        // drawing
        var drawing = false, prevX=undefined, prevY=undefined;
        canvas.addEventListener("mousedown", function(e) {
            prevX = e.clientX - canvas.offsetLeft;
            prevY = e.clientY - canvas.offsetTop;
            drawing = true;
        }, false);
        canvas.addEventListener("mouseup", function(e) {
            drawing = false;
        }, false);
        canvas.addEventListener("mousemove", function(e) {
            if (!drawing) return;
            var curX = e.clientX - canvas.offsetLeft,
                curY = e.clientY - canvas.offsetTop;
            if (prevX !== undefined && prevY !== undefined) {
                ctx.beginPath();
                ctx.moveTo(prevX, prevY);
                ctx.lineTo(curX, curY);
                ctx.strokeStyle = "#000000";
                ctx.lineWidth = 1;
                ctx.stroke();
                ctx.closePath();
            }
            prevX = curX;
            prevY = curY;
        }, false);

        /*
         * render to PNG, and download
         */
        var btn_download = document.getElementById("btn-download");
        btn_download.addEventListener("click", function() {
            var errorHandler = function(err) {
                alert("abort, error = " + err);
            };

            window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
            window.requestFileSystem(window.TEMPORARY, 1024*1024/*bytes*/,
              function(fs) {
                  // fs request success
                  fs.root.getFile("drawing.png", {create: true, exclusive: false},
                    function(fileEntry) {
                        // getFile success 
                        fileEntry.createWriter(function(fileWriter) {
                            // createWriter success
                            fileWriter.onwriteend = function(e) {
                                // blob written
                                location.href = fileEntry.toURL();
                            };
                            fileWriter.onerror = errorHandler;
                            var dataUrl = canvas.toDataURL("image/png"); //data:image/png;base64,iVBO...
                            var data = window.atob(dataUrl.substring(dataUrl.indexOf(",")+1)); //string
                            var stream = new Uint8Array(data.length);
                            [].forEach.call(data, function(ch, idx) {
                                stream[idx] = ch.charCodeAt(0);
                            })
                            var blob = new Blob([stream.buffer], {type: "image/png"});
                            fileWriter.write(blob);
                        }, errorHandler);
                    }, errorHandler);
              }, errorHandler);
        }, false); 
    })(window);
  </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>HTML 5 Canvas & File System</title>
	<style>
	button,
	#canvas {
	cursor: pointer;
	}

	#canvas {
	border: 1px solid black;
	}
	</style>
	</head>
	<body>
	<div>
	<button type="button" id="btn-download">Download</button>
	<button type="button" id="btn-clear">Clear</button>
	<a href="#" id="link" target="_blank">Click me</a>
	</div>
	<hr>
	<canvas id="canvas" width="480" height="360" style="border:1px solid black;"></canvas>

	<script>
	(function(window) {
	var canvas = document.getElementById("canvas");
	var width = canvas.width, height = canvas.height;
	var ctx = canvas.getContext("2d");
	/*
	* enable drawing on canvas
	*/
	// clear
	var btn_clear = document.getElementById("btn-clear");
	btn_clear.addEventListener("click", function() {
	ctx.clearRect(0, 0, width, height);
	console.log("clear");
	}, false);
	// drawing
	var drawing = false, prevX=undefined, prevY=undefined;
	canvas.addEventListener("mousedown", function(e) {
	prevX = e.clientX - canvas.offsetLeft;
	prevY = e.clientY - canvas.offsetTop;
	drawing = true;
	}, false);
	canvas.addEventListener("mouseup", function(e) {
	drawing = false;
	}, false);
	canvas.addEventListener("mousemove", function(e) {
	if (!drawing) return;
	var curX = e.clientX - canvas.offsetLeft,
	curY = e.clientY - canvas.offsetTop;
	if (prevX !== undefined && prevY !== undefined) {
	ctx.beginPath();
	ctx.moveTo(prevX, prevY);
	ctx.lineTo(curX, curY);
	ctx.strokeStyle = "#000000";
	ctx.lineWidth = 1;
	ctx.stroke();
	ctx.closePath();
	}
	prevX = curX;
	prevY = curY;
	}, false);

	/*
	* render to PNG, and download
	*/
	var btn_download = document.getElementById("btn-download");
	btn_download.addEventListener("click", function() {
	var errorHandler = function(err) {
	alert("abort, error = " + err);
	};

	window.requestFileSystem = window.requestFileSystem \|\| window.webkitRequestFileSystem;
	window.requestFileSystem(window.TEMPORARY, 10241024/bytes*/,
	function(fs) {
	// fs request success
	fs.root.getFile("drawing.png", {create: true, exclusive: false},
	function(fileEntry) {
	// getFile success
	fileEntry.createWriter(function(fileWriter) {
	// createWriter success
	fileWriter.onwriteend = function(e) {
	// blob written
	location.href = fileEntry.toURL();
	};
	fileWriter.onerror = errorHandler;
	var dataUrl = canvas.toDataURL("image/png"); //data:image/png;base64,iVBO...
	var data = window.atob(dataUrl.substring(dataUrl.indexOf(",")+1)); //string
	var stream = new Uint8Array(data.length);
	[].forEach.call(data, function(ch, idx) {
	stream[idx] = ch.charCodeAt(0);
	})
	var blob = new Blob([stream.buffer], {type: "image/png"});
	fileWriter.write(blob);
	}, errorHandler);
	}, errorHandler);
	}, errorHandler);
	}, false);
	})(window);
	</script>
	</body>
	</html>