bzdgn · December 16, 2016 07:44 · bzdgn · Dec 15, 2016
diff --git a/multiCanvasWithClear.html b/multiCanvasWithClear.html
 <!DOCTYPE html>
 <html>
 	<head>
 		<style>
 			/* I use this class to disable onmouse events for the upper canvas layers */
 			.canvas-mouse {
 				pointer-events: none;
 			}
 		</style>
 	</head>
 	<body>
 		<!-- 3*x -->
 		<!-- 630 891 -->
 		<!-- written by Levent Divilioglu / 16.12.2016 -->
 		<canvas id="topCanvas"       width="737" height="100" style="z-index: -1; border:1px solid #d3d3d3; position:absolute; left:0px;   top:0px;   " onmousemove="handleMouseMove(event)" onscroll="handleScroll" onmouseover="mouseOver(this)" onmousedown="handleMouseClick(event)" onmouseup="handleMouseRelease(event)" >
 		</canvas>                                         
 		<canvas id="leftCanvas"      width="100" height="891" style="z-index: -1; border:1px solid #d3d3d3; position:absolute; left:0px;   top:106px; " onmousemove="handleMouseMove(event)" onscroll="handleScroll" onmouseover="mouseOver(this)" onmousedown="handleMouseClick(event)" onmouseup="handleMouseRelease(event)" >
 		</canvas>                                          
 		<canvas id="mainCanvas"      width="630" height="891" style="z-index: -1; border:1px solid #d3d3d3; position:absolute; left:106px; top: 106px;" onmousemove="handleMouseMove(event)" onscroll="handleScroll" onmouseover="mouseOver(this)" onmousedown="handleMouseClick(event)" onmouseup="handleMouseRelease(event)" >
 		</canvas>                     
 		                              
 		<!-- layers -->               
 		<canvas id="topCanvasLayer"  class = "canvas-mouse" width="737" height="100" style="z-index: 0; border:1px solid #d3d3d3; position:absolute; left:0px;   top:0px;   " >
 		</canvas>                                                                 
 		<canvas id="leftCanvasLayer" class = "canvas-mouse" width="100" height="891" style="z-index: 0; border:1px solid #d3d3d3; position:absolute; left:0px;   top:106px; " >
 		</canvas>                                                                 
 		<canvas id="mainCanvasLayer" class = "canvas-mouse" width="630" height="891" style="z-index: 0; border:1px solid #d3d3d3; position:absolute; left:106px; top: 106px;" >
 		</canvas>

 		
 		<script>
 			// coordinates
 			x1 = -1;
 			x2 = -1;
 			y1 = -1;
 			y2 = -1;
 			
 			// x2, y2 cache
 			prevX2 = -1;
 			prevY2 = -1;
 			
 			// real canvases
 			topCanvas		= document.getElementById( "topCanvas"  );
 			leftCanvas		= document.getElementById( "leftCanvas" );
 			mainCanvas		= document.getElementById( "mainCanvas" );
 			
 			// up layers
 			topCanvasLayer	= document.getElementById( "topCanvasLayer"  );
 			leftCanvasLayer	= document.getElementById( "leftCanvasLayer" );
 			mainCanvasLayer	= document.getElementById( "mainCanvasLayer" );
 			
 			canvas			= mainCanvas;
 			canvasLayer		= mainCanvasLayer;
 			
 			ctx			= canvas.getContext("2d");
 			ctxLayer	= canvasLayer.getContext("2d");
 			
 			canvasOffsetX = -1;
 			canvasOffsetY = -1;
 			
 			clickState = false;
 			canvasCrossState = false;
 			willStroke = true;
 			prevCanvas = canvas;
 			
 			//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 handleScroll() {
 				//
 			}
 			
 			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;
 				
 				if(prevCanvas !== activeCanvas) {
 					canvasCrossState = true;
 					prevCanvas = activeCanvas;
 				} else {
 					canvasCrossState = false;
 				}
 				
 				switch(canvas.id) {
 					case 'topCanvas':
 						canvasLayer = topCanvasLayer;
 						break;
 					
 					case 'leftCanvas':
 						canvasLayer = leftCanvasLayer;
 						break;
 					
 					case 'mainCanvas':
 						canvasLayer = mainCanvasLayer;
 						break;
 					
 					default:
 						//
 				}
 				
 				ctx			= canvas.getContext("2d");
 				ctxLayer	= canvasLayer.getContext("2d");
 				handleCanvasOffsets(canvas);
 			};
 			
 			function handleMouseClick(event) {
 				x1 = event.clientX;
 				y1 = event.clientY;
 				
 				clickState = true;
 			};
 			
 			function handleMouseMove(event) {
 				if(clickState === true) {							
 					clearTopLayers();
 					
 					x2 = event.clientX;
 					y2 = event.clientY;
 					
 					if(prevX2 !== -1 && prevY2 !== -1) {
 						drawPreviewRectangle(x1, y1, prevX2, prevY2, red);
 					}
 					
 					prevX2 = x2;
 					prevY2 = y2;
 				};
 			};
 			
 			function handleMouseRelease(event) {
 				if(clickState === true) {
 					x2 = event.clientX;
 					y2 = event.clientY;
 					
 					clickState = false;
 					
 					clearTopLayers();
 					drawRectangle(x1, y1, x2, y2, black);
 					
 					// refresh cache
 					prevX2 = -1;
 					prevY2 = -1;
 				} else {
 				};
 			};
 			
 			// draws to upper layer, will be used for temporary
 			function drawPreviewRectangle(x1, y1, x2, y2, color) {
 				drawRectCtx(ctxLayer, x1, y1, x2, y2, color)
 			};
 			
 			// draws to lower layer, will be used for permament
 			function drawRectangle(x1, y1, x2, y2, color) {
 				drawRectCtx(ctx, x1, y1, x2, y2, color)
 			};
 			
 			function drawRectCtx(ctx, 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();
 				ctx.closePath();
 			}
 			
 			function clearTopLayers() {
 				ctxLayer.beginPath();
 				ctxLayer.clearRect( 0, 0, canvasLayer.width, canvasLayer.height );
 				ctxLayer.closePath();
 			}
 		</script>
 	</body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	/* I use this class to disable onmouse events for the upper canvas layers */
	.canvas-mouse {
	pointer-events: none;
	}
	</style>
	</head>
	<body>
	<!-- 3*x -->
	<!-- 630 891 -->
	<!-- written by Levent Divilioglu / 16.12.2016 -->
	<canvas id="topCanvas" width="737" height="100" style="z-index: -1; border:1px solid #d3d3d3; position:absolute; left:0px; top:0px; " onmousemove="handleMouseMove(event)" onscroll="handleScroll" onmouseover="mouseOver(this)" onmousedown="handleMouseClick(event)" onmouseup="handleMouseRelease(event)" >
	</canvas>
	<canvas id="leftCanvas" width="100" height="891" style="z-index: -1; border:1px solid #d3d3d3; position:absolute; left:0px; top:106px; " onmousemove="handleMouseMove(event)" onscroll="handleScroll" onmouseover="mouseOver(this)" onmousedown="handleMouseClick(event)" onmouseup="handleMouseRelease(event)" >
	</canvas>
	<canvas id="mainCanvas" width="630" height="891" style="z-index: -1; border:1px solid #d3d3d3; position:absolute; left:106px; top: 106px;" onmousemove="handleMouseMove(event)" onscroll="handleScroll" onmouseover="mouseOver(this)" onmousedown="handleMouseClick(event)" onmouseup="handleMouseRelease(event)" >
	</canvas>

	<!-- layers -->
	<canvas id="topCanvasLayer" class = "canvas-mouse" width="737" height="100" style="z-index: 0; border:1px solid #d3d3d3; position:absolute; left:0px; top:0px; " >
	</canvas>
	<canvas id="leftCanvasLayer" class = "canvas-mouse" width="100" height="891" style="z-index: 0; border:1px solid #d3d3d3; position:absolute; left:0px; top:106px; " >
	</canvas>
	<canvas id="mainCanvasLayer" class = "canvas-mouse" width="630" height="891" style="z-index: 0; border:1px solid #d3d3d3; position:absolute; left:106px; top: 106px;" >
	</canvas>


	<script>
	// coordinates
	x1 = -1;
	x2 = -1;
	y1 = -1;
	y2 = -1;

	// x2, y2 cache
	prevX2 = -1;
	prevY2 = -1;

	// real canvases
	topCanvas = document.getElementById( "topCanvas" );
	leftCanvas = document.getElementById( "leftCanvas" );
	mainCanvas = document.getElementById( "mainCanvas" );

	// up layers
	topCanvasLayer = document.getElementById( "topCanvasLayer" );
	leftCanvasLayer = document.getElementById( "leftCanvasLayer" );
	mainCanvasLayer = document.getElementById( "mainCanvasLayer" );

	canvas = mainCanvas;
	canvasLayer = mainCanvasLayer;

	ctx = canvas.getContext("2d");
	ctxLayer = canvasLayer.getContext("2d");

	canvasOffsetX = -1;
	canvasOffsetY = -1;

	clickState = false;
	canvasCrossState = false;
	willStroke = true;
	prevCanvas = canvas;

	//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 handleScroll() {
	//
	}

	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;

	if(prevCanvas !== activeCanvas) {
	canvasCrossState = true;
	prevCanvas = activeCanvas;
	} else {
	canvasCrossState = false;
	}

	switch(canvas.id) {
	case 'topCanvas':
	canvasLayer = topCanvasLayer;
	break;

	case 'leftCanvas':
	canvasLayer = leftCanvasLayer;
	break;

	case 'mainCanvas':
	canvasLayer = mainCanvasLayer;
	break;

	default:
	//
	}

	ctx = canvas.getContext("2d");
	ctxLayer = canvasLayer.getContext("2d");
	handleCanvasOffsets(canvas);
	};

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

	clickState = true;
	};

	function handleMouseMove(event) {
	if(clickState === true) {
	clearTopLayers();

	x2 = event.clientX;
	y2 = event.clientY;

	if(prevX2 !== -1 && prevY2 !== -1) {
	drawPreviewRectangle(x1, y1, prevX2, prevY2, red);
	}

	prevX2 = x2;
	prevY2 = y2;
	};
	};

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

	clickState = false;

	clearTopLayers();
	drawRectangle(x1, y1, x2, y2, black);

	// refresh cache
	prevX2 = -1;
	prevY2 = -1;
	} else {
	};
	};

	// draws to upper layer, will be used for temporary
	function drawPreviewRectangle(x1, y1, x2, y2, color) {
	drawRectCtx(ctxLayer, x1, y1, x2, y2, color)
	};

	// draws to lower layer, will be used for permament
	function drawRectangle(x1, y1, x2, y2, color) {
	drawRectCtx(ctx, x1, y1, x2, y2, color)
	};

	function drawRectCtx(ctx, 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();
	ctx.closePath();
	}

	function clearTopLayers() {
	ctxLayer.beginPath();
	ctxLayer.clearRect( 0, 0, canvasLayer.width, canvasLayer.height );
	ctxLayer.closePath();
	}
	</script>
	</body>
	</html>