<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Canvas - The Cure</title>
	<style>
		canvas {
			border: 1px solid #000;
margin-left:100px;
		}
	</style>
</head>

<body>
	
<div id="container">
  <header>
    <h1>Canvas</h1>
  </header>
      
  <div>
    <section>
      
      <span id="my_mouse"></span>
      <br><canvas id="my_canvas" width="400" height="400">I am canvas</canvas>
      <br><input type="button" value="Save canvas" onclick="saveX(event);">
        
      </section>
    </div>
    
    <footer>
    </footer>
</div>
	
	
<script>
function getEl(id) {return document.getElementById(id);}

var MM;
MM = {};
MM.data = {};
MM.obj = {};
MM.obj.id = {};
MM.func = {};
MM.func.init = function()
	{
	var i, canvas, id, data;
	data = {};
	data.drag = false;
	data.rect = {startX:0, startY:0, w:0, h:0};
	MM.data = data;
	id = {};
	id.canvas = 'my_canvas';
	id.mouse  = 'my_mouse';
	for (i in id)
		{
		MM.obj.id[i] = i
		MM.obj[i]    = getEl(id[i]);
		}
	canvas = MM.obj.canvas;
	canvas.addEventListener('mousedown', MM.func.mouseDown, false);
	canvas.addEventListener('mouseup'  , MM.func.mouseUp  , false);
	canvas.addEventListener('mousemove', MM.func.mouseMove, false);
	canvas.addEventListener('mouseout', MM.func.mouseOut, false);
	MM.obj.ctx = canvas.getContext('2d');
	}

MM.func.mouseXY = function(event) {
  target = event.target || event.srcElement;
//  event.pageX = event.pageX || (event.clientX + (document.scrollLeft || document.body.scrollLeft || 0) - (document.clientLeft || document.body.clientLeft || 0));
//  event.pageY = event.pageY || (event.clientY + (document.scrollTop  || document.body.scrollTop  || 0) - (document.clientTop  || document.body.clientTop  || 0));

	return {
		x: event.pageX - target.offsetLeft,
		y: event.pageY - target.offsetTop
		}
	}


MM.func.mouseOut = function(event) {
  var mouse = MM.func.mouseXY(event);
  canvas = MM.obj.canvas;
  rect   = MM.data.rect;
//alert(canvas.offsetLeft);
  if (mouse.x<0)
	{
    rect.w = 0 - rect.startX;
	}
  MM.data.rect = rect;
    MM.func.rectClear();
    MM.func.rectDraw(rect);
//		y: mouse.y - canvas.offsetTop

MM.obj.mouse.innerHTML = mouse.toSource();
}

MM.func.mouseDown = function(event) {
  var mouse = MM.func.mouseXY(event);
  MM.data.rect.startX = mouse.x;
  MM.data.rect.startY = mouse.y;
  MM.data.drag = true;
}

MM.func.mouseUp = function() {
  MM.data.drag = false;
    MM.func.rectClear();
}
MM.func.mouseMove = function(event) {
  if (MM.data.drag) {
    var mouse, rect;
	mouse = MM.func.mouseXY(event);
	rect  = MM.data.rect;
    rect.w = mouse.x - rect.startX;
    rect.h = mouse.y - rect.startY;
    MM.data.rect = rect;
    MM.func.rectClear();
    MM.func.rectDraw(rect);
  }
}

MM.func.rectClear = function() {
    MM.obj.ctx.clearRect(0,0,MM.obj.canvas.width,MM.obj.canvas.height);
	}

MM.func.rectDraw = function(rect) {
  MM.obj.ctx.setLineDash([6]);
  MM.obj.ctx.strokeRect(rect.startX, rect.startY, rect.w, rect.h);
}
MM.func.init();

//var canvas = MM.obj.canvas;
//document.getElementById("my-canvas")

//var canvas = document.getElementById('canvas'),
//var
//    ctx = canvas.getContext('2d'),
//    rect = {},
//    drag = false;

//function init() {
//}


//init();



/*
var
	context = canvas.getContext("2d"),
	img = document.createElement("img"),
	mouseDown = false,
	brushColor = "rgb(0, 0, 0)",
	hasText = true,
	clearCanvas = function () {
		if (hasText) {
			context.clearRect(0, 0, canvas.width, canvas.height);
			hasText = false;
		}
	};
	
// Adding instructions
context.fillText("Drop an image onto the canvas", 240, 200);
context.fillText("Click a spot to set as brush color", 240, 220);

// Image for loading	
img.addEventListener("load", function () {
	clearCanvas();
	context.drawImage(img, 0, 0);
}, false);

// Detect mousedown
canvas.addEventListener("mousedown", function (evt) {
	clearCanvas();
	mouseDown = true;
	context.beginPath();
}, false);

// Detect mouseup
canvas.addEventListener("mouseup", function (evt) {
	mouseDown = false;
	var colors = context.getImageData(evt.layerX, evt.layerY, 1, 1).data;
	brushColor = "rgb(" + colors[0] + ", " + colors[1] + ", " + colors[2] + ")";
}, false);

// Draw, if mouse button is pressed
canvas.addEventListener("mousemove", function (evt) {
	if (mouseDown) {
		context.strokeStyle = brushColor;								
		context.lineWidth = 20;
		context.lineJoin = "round";
		context.lineTo(evt.layerX+1, evt.layerY+1);
		context.stroke();
	}
}, false);

// To enable drag and drop
canvas.addEventListener("dragover", function (evt) {
	evt.preventDefault();
}, false);

// Handle dropped image file - only Firefox and Google Chrome
canvas.addEventListener("drop", function (evt) {
	var files = evt.dataTransfer.files;
	if (files.length > 0) {
		var file = files[0];
		if (typeof FileReader !== "undefined" && file.type.indexOf("image") != -1) {
			var reader = new FileReader();
			// Note: addEventListener doesn't work in Google Chrome for this event
			reader.onload = function (evt) {
				img.src = evt.target.result;
			};
			reader.readAsDataURL(file);
		}
	}
	evt.preventDefault();
}, false);

function saveX(evt) {
  window.open(canvas.toDataURL("image/png"));
  evt.preventDefault();
}
*/


/*
// Save image
var saveImage = document.createElement("button");
saveImage.innerHTML = "Save canvas";
saveImage.addEventListener("click", function (evt) {
	window.open(canvas.toDataURL("image/png"));
	evt.preventDefault();
}, false);
document.getElementById("main-content").appendChild(saveImage);
*/
</script>

</body>
</html>