nasitra/Simple Paint

## index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" />
<title>Simple Paint</title>
<link rel="stylesheet" href="//code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
<style>
  * {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-text-size-adjust:none;
    -webkit-touch-callout:none;
  }

  body {
    -webkit-user-select: none;
    margin: 0px;
    user-select: none;
    width: 100%;
  }

  #content {
    padding-bottom: 0px;
  }

  #canvas-container {
    width: 100%;
  }

  #canvas {
    -webkit-user-select: text;
    background-color: white;
    border: 1px solid black;
    cursor: crosshair;
    user-select: text;
  }

  #button-container {
    text-align: right;
  }

  #export-button-container {
    margin: 20px auto;
    text-align: center;
  }

  #export-button-spacer {
    display: inline-block;
    width: 30px;
  }
</style>
<script src="//code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="//code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
</head>
<body>
  <div data-role="page">
    <div data-role="header">
      <h1>Simple Paint</h1>
    </div>
    <div id="content" data-role="content">
      <div id="canvas-container">
        <canvas id="canvas"></canvas>
      </div>
      <div id="button-container">
        <button id="reset-button" href="#" data-inline="true">Reset</button>
        <button id="export-button" href="#" data-theme="b" data-inline="true">Export</button>
      </div>
    </div>
  </div>
  <script>
    $(function() {
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");
      var updateCanvasSize = function() {
        var $canvasContainer = $("#canvas-container");
        canvas.width = parseInt($canvasContainer.width(), 10);
        var $buttonContainer = $("#button-container");
        canvas.height = window.innerHeight - parseInt($buttonContainer.height(), 10) - 64;
      };
      var canvasReset = function() {
        updateCanvasSize();
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = "#fff";
        ctx.fillRect(0, 0, canvas.width, canvas.height);
      };
      canvasReset();
      $("#reset-button").click(canvasReset);
      function exportImage(type) {
        var imageData = canvas.toDataURL("image/" + type);
        var exportWindow = window.open("about:blank", null, "width=" + canvas.width + ",height=" + canvas.height);
        var exportWindowDocument = exportWindow.document;
        exportWindowDocument.title = "Export";
        exportWindowDocument.body.style.margin = "0px";
        exportWindowDocument.body.innerHTML = "<img src='" + imageData + "'>";
      }
      $("#export-button").click(function() { exportImage("png"); });
      var isUpdate = true;
      var timer = null;
      var base64 = null;
      $(window).resize(function() {
        if (!isUpdate) { return; }
        if (timer) { clearTimeout(timer); }
        if (base64 === null) {
          base64 = canvas.toDataURL();
          canvas.style.opacity = "0.6";
        }
        updateCanvasSize();
        canvasReset();
        timer = setTimeout(function() {
          if (base64) {
            var image = new Image();
            image.src = base64;
            image.onload = function(){
              ctx.drawImage(image, 0, 0);
              base64 = null;
            };
          }
          canvas.style.opacity = "1";
        }, 100);
      });
      var isTouchEnabled = ("createTouch" in document);
      var START = isTouchEnabled ? "touchstart" : "mousedown";
      var MOVE = isTouchEnabled ? "touchmove" : "mousemove";
      var END = isTouchEnabled ? "touchend" : "mouseup";
      var getRelativePoint = function(event) {
        var x, y;
        if (isTouchEnabled) { x = event.touches[0].clientX, y = event.touches[0].clientY; }
        else { x = event.clientX, y = event.clientY; }
        var rect = canvas.getBoundingClientRect();
        x -= rect.left, y -= rect.top;
        return { x: x, y: y };
      };
      var move = function(e) {
        var event = e.originalEvent;
        event.preventDefault();
        var point = getRelativePoint(event);
        ctx.lineTo(point.x, point.y);
        ctx.stroke();
      };
      var end = function(e) {
        var event = e.originalEvent;
        event.preventDefault();
        $(window).unbind(MOVE, move);
        $(window).unbind(END, end);
      };
      var start = function(e) {
        var event = e.originalEvent;
        event.preventDefault();
        var point = getRelativePoint(event);
        ctx.beginPath();
        ctx.moveTo(point.x, point.y);
        $(window).bind(MOVE, move);
        $(window).bind(END, end);
      };
      $(canvas).bind(START, start);
    });
  </script>
</body>
</html>

## Simple Paint
- Draw by mouse drag (compatible with touch)
- Export your drawing to png format

2013/9/12
- modify the source code
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" />
	<title>Simple Paint</title>
	<link rel="stylesheet" href="//code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
	<style>
	* {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-text-size-adjust:none;
	-webkit-touch-callout:none;
	}

	body {
	-webkit-user-select: none;
	margin: 0px;
	user-select: none;
	width: 100%;
	}

	#content {
	padding-bottom: 0px;
	}

	#canvas-container {
	width: 100%;
	}

	#canvas {
	-webkit-user-select: text;
	background-color: white;
	border: 1px solid black;
	cursor: crosshair;
	user-select: text;
	}

	#button-container {
	text-align: right;
	}

	#export-button-container {
	margin: 20px auto;
	text-align: center;
	}

	#export-button-spacer {
	display: inline-block;
	width: 30px;
	}
	</style>
	<script src="//code.jquery.com/jquery-1.8.3.min.js"></script>
	<script src="//code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
	</head>
	<body>
	<div data-role="page">
	<div data-role="header">
	<h1>Simple Paint</h1>
	</div>
	<div id="content" data-role="content">
	<div id="canvas-container">
	<canvas id="canvas"></canvas>
	</div>
	<div id="button-container">
	<button id="reset-button" href="#" data-inline="true">Reset</button>
	<button id="export-button" href="#" data-theme="b" data-inline="true">Export</button>
	</div>
	</div>
	</div>
	<script>
	$(function() {
	var canvas = document.getElementById("canvas");
	var ctx = canvas.getContext("2d");
	var updateCanvasSize = function() {
	var $canvasContainer = $("#canvas-container");
	canvas.width = parseInt($canvasContainer.width(), 10);
	var $buttonContainer = $("#button-container");
	canvas.height = window.innerHeight - parseInt($buttonContainer.height(), 10) - 64;
	};
	var canvasReset = function() {
	updateCanvasSize();
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	ctx.fillStyle = "#fff";
	ctx.fillRect(0, 0, canvas.width, canvas.height);
	};
	canvasReset();
	$("#reset-button").click(canvasReset);
	function exportImage(type) {
	var imageData = canvas.toDataURL("image/" + type);
	var exportWindow = window.open("about:blank", null, "width=" + canvas.width + ",height=" + canvas.height);
	var exportWindowDocument = exportWindow.document;
	exportWindowDocument.title = "Export";
	exportWindowDocument.body.style.margin = "0px";
	exportWindowDocument.body.innerHTML = "<img src='" + imageData + "'>";
	}
	$("#export-button").click(function() { exportImage("png"); });
	var isUpdate = true;
	var timer = null;
	var base64 = null;
	$(window).resize(function() {
	if (!isUpdate) { return; }
	if (timer) { clearTimeout(timer); }
	if (base64 === null) {
	base64 = canvas.toDataURL();
	canvas.style.opacity = "0.6";
	}
	updateCanvasSize();
	canvasReset();
	timer = setTimeout(function() {
	if (base64) {
	var image = new Image();
	image.src = base64;
	image.onload = function(){
	ctx.drawImage(image, 0, 0);
	base64 = null;
	};
	}
	canvas.style.opacity = "1";
	}, 100);
	});
	var isTouchEnabled = ("createTouch" in document);
	var START = isTouchEnabled ? "touchstart" : "mousedown";
	var MOVE = isTouchEnabled ? "touchmove" : "mousemove";
	var END = isTouchEnabled ? "touchend" : "mouseup";
	var getRelativePoint = function(event) {
	var x, y;
	if (isTouchEnabled) { x = event.touches[0].clientX, y = event.touches[0].clientY; }
	else { x = event.clientX, y = event.clientY; }
	var rect = canvas.getBoundingClientRect();
	x -= rect.left, y -= rect.top;
	return { x: x, y: y };
	};
	var move = function(e) {
	var event = e.originalEvent;
	event.preventDefault();
	var point = getRelativePoint(event);
	ctx.lineTo(point.x, point.y);
	ctx.stroke();
	};
	var end = function(e) {
	var event = e.originalEvent;
	event.preventDefault();
	$(window).unbind(MOVE, move);
	$(window).unbind(END, end);
	};
	var start = function(e) {
	var event = e.originalEvent;
	event.preventDefault();
	var point = getRelativePoint(event);
	ctx.beginPath();
	ctx.moveTo(point.x, point.y);
	$(window).bind(MOVE, move);
	$(window).bind(END, end);
	};
	$(canvas).bind(START, start);
	});
	</script>
	</body>
	</html>
	- Draw by mouse drag (compatible with touch)
	- Export your drawing to png format

	2013/9/12
	- modify the source code