bzdgn · December 14, 2016 08:46
diff --git a/multiCanvas.html b/multiCanvas.html
 <!DOCTYPE html>
 <html>
 	<head>

 	</head>
 	<body>
 		<!-- 3*x A4 -->
 		<!-- 630 891 -->
 		<canvas id="topCanvas" width="737" height="100" style="border:1px solid #d3d3d3;"  onmouseover="mouseOver(this)" onmousedown="handleMouseClick(event)" onmouseup="handleMouseRelease(event)">
 		</canvas>
 		<br/>
 		<canvas id="leftCanvas" width="100" height="891" style="border:1px solid #d3d3d3;" onmouseover="mouseOver(this)" onmousedown="handleMouseClick(event)" onmouseup="handleMouseRelease(event)">
 		</canvas>
 		<canvas id="mainCanvas" width="630" height="891" style="border:1px solid #d3d3d3;" onmouseover="mouseOver(this)" onmousedown="handleMouseClick(event)" onmouseup="handleMouseRelease(event)">
 		</canvas>
 		<script>
 			// Written By Levent Divilioglu
 			// To be fixed: Page Scroll corrupts pageYOffset
 			
 			// globals
 			
 			// coordinates
 			x1 = -1;
 			x2 = -1;
 			y1 = -1;
 			y2 = -1;
 			
 			clickState = false;
 			
 			topCanvas = document.getElementById("topCanvas");
 			leftCanvas = document.getElementById("leftCanvas");
 			mainCanvas = document.getElementById("mainCanvas");
 			
 			canvas = mainCanvas;
 			ctx = canvas.getContext("2d");
 			
 			canvasOffsetX = -1;
 			canvasOffsetY = -1;
 			
 			//rgba(0,0,0,0.7)
 			//black	= "#000000";
 			//white	= "#FFFFFF";
 			//red	= "#FF0000";
 			//blue	= "#0000FF"
 			//green	= "#00FF00"
 			
 			black	= "rgba(0  , 0  , 0  , 1.0)";
 			white	= "rgba(255, 255, 255, 1.0)";
 			red		= "rgba(255, 0  , 0  , 1.0)";
 			green	= "rgba(0  , 255, 0  , 1.0)";
 			blue	= "rgba(0  , 0  , 255, 1.0)";

 			
 			clear	= white;
 			
 			(function() {
 				//
 			})();
 			
 			function handleCanvasOffsets(c) {
 				getCanvasXOffset(c);
 				getCanvasYOffset(c);
 			}
 			
 			// http://stackoverflow.com/questions/288699/get-the-position-of-a-div-span-tag
 			function getCanvasXOffset(c) {
 				var offsets = c.getBoundingClientRect();
 				
 				canvasOffsetX = offsets.left;
 			}
 			
 			// http://stackoverflow.com/questions/288699/get-the-position-of-a-div-span-tag
 			function getCanvasYOffset(c) {
 				var offsets = c.getBoundingClientRect();
 				
 				canvasOffsetY = offsets.top;
 			}
 			
 			function mouseOver(activeCanvas) {
 				canvas = activeCanvas;
 				ctx = canvas.getContext("2d");
 				handleCanvasOffsets(canvas);
 			};
 			
 			function handleMouseClick(event) {
 				x1 = event.clientX;
 				y1 = event.clientY;
 				
 				clickState = true;
 			};
 			
 			function handleMouseRelease(event) {
 				if(clickState === true) {
 					x2 = event.clientX;
 					y2 = event.clientY;
 					
 					clickState = false;
 					
 					drawRectangle(x1, y1, x2, y2, black);
 				} else {
 					;
 				};
 			};
 			
 			function drawRectangle(x1, y1, x2, y2, color) {
 				ctx.beginPath();
 				ctx.rect(x1 - canvasOffsetX + window.pageXOffset, y1 - canvasOffsetY + window.pageYOffset, x2-x1, y2-y1);
 				ctx.strokeStyle = color;
 				ctx.stroke();
 			};
 		</script>
 	</body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>

	</head>
	<body>
	<!-- 3*x A4 -->
	<!-- 630 891 -->
	<canvas id="topCanvas" width="737" height="100" style="border:1px solid #d3d3d3;" onmouseover="mouseOver(this)" onmousedown="handleMouseClick(event)" onmouseup="handleMouseRelease(event)">
	</canvas>
	<br/>
	<canvas id="leftCanvas" width="100" height="891" style="border:1px solid #d3d3d3;" onmouseover="mouseOver(this)" onmousedown="handleMouseClick(event)" onmouseup="handleMouseRelease(event)">
	</canvas>
	<canvas id="mainCanvas" width="630" height="891" style="border:1px solid #d3d3d3;" onmouseover="mouseOver(this)" onmousedown="handleMouseClick(event)" onmouseup="handleMouseRelease(event)">
	</canvas>
	<script>
	// Written By Levent Divilioglu
	// To be fixed: Page Scroll corrupts pageYOffset

	// globals

	// coordinates
	x1 = -1;
	x2 = -1;
	y1 = -1;
	y2 = -1;

	clickState = false;

	topCanvas = document.getElementById("topCanvas");
	leftCanvas = document.getElementById("leftCanvas");
	mainCanvas = document.getElementById("mainCanvas");

	canvas = mainCanvas;
	ctx = canvas.getContext("2d");

	canvasOffsetX = -1;
	canvasOffsetY = -1;

	//rgba(0,0,0,0.7)
	//black = "#000000";
	//white = "#FFFFFF";
	//red = "#FF0000";
	//blue = "#0000FF"
	//green = "#00FF00"

	black = "rgba(0 , 0 , 0 , 1.0)";
	white = "rgba(255, 255, 255, 1.0)";
	red = "rgba(255, 0 , 0 , 1.0)";
	green = "rgba(0 , 255, 0 , 1.0)";
	blue = "rgba(0 , 0 , 255, 1.0)";


	clear = white;

	(function() {
	//
	})();

	function handleCanvasOffsets(c) {
	getCanvasXOffset(c);
	getCanvasYOffset(c);
	}

	// http://stackoverflow.com/questions/288699/get-the-position-of-a-div-span-tag
	function getCanvasXOffset(c) {
	var offsets = c.getBoundingClientRect();

	canvasOffsetX = offsets.left;
	}

	// http://stackoverflow.com/questions/288699/get-the-position-of-a-div-span-tag
	function getCanvasYOffset(c) {
	var offsets = c.getBoundingClientRect();

	canvasOffsetY = offsets.top;
	}

	function mouseOver(activeCanvas) {
	canvas = activeCanvas;
	ctx = canvas.getContext("2d");
	handleCanvasOffsets(canvas);
	};

	function handleMouseClick(event) {
	x1 = event.clientX;
	y1 = event.clientY;

	clickState = true;
	};

	function handleMouseRelease(event) {
	if(clickState === true) {
	x2 = event.clientX;
	y2 = event.clientY;

	clickState = false;

	drawRectangle(x1, y1, x2, y2, black);
	} else {
	;
	};
	};

	function drawRectangle(x1, y1, x2, y2, color) {
	ctx.beginPath();
	ctx.rect(x1 - canvasOffsetX + window.pageXOffset, y1 - canvasOffsetY + window.pageYOffset, x2-x1, y2-y1);
	ctx.strokeStyle = color;
	ctx.stroke();
	};
	</script>
	</body>
	</html>