bzdgn · December 28, 2016 18:07 · bzdgn · Dec 28, 2016
diff --git a/multiCanvasWithClearV2.html b/multiCanvasWithClearV2.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 onscroll="handleScroll()">
 		<!-- 3*x -->
 		<!-- 630 891 -->
 		<!-- written by Levent Divilioglu / 16.12.2016 -->
 		<!-- updated / 28.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)" 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)" 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)" 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>
 			(function() {
 				// 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");
 				
 				prevCanvas			= canvas;
 				prevCanvasLayer		= canvasLayer;
 				
 				canvasOffsetX = -1;
 				canvasOffsetY = -1;
 				handleCanvasOffsets(canvas);
 				console.log('offset: ' + canvasOffsetY);
 				
 				clickState = false;
 				canvasCrossState = false;
 				willStroke = true;
 				prevCanvas = canvas;
 				
 				// cache
 				clickCanvas = "none";
 				
 				//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 handleScroll() {
 				console.log('scroll');
 				handleCanvasOffsets(canvas);
 			}
 			
 			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) {
 				clickCanvas = canvas.id;
 				
 				x1 = event.clientX;
 				y1 = event.clientY;
 				
 				clickState = true;
 			}
 			
 			function handleMouseMove(event) {
 				if(clickState === true) {
 					clearTopLayers();
 					
 					if(clickCanvas !== 'none' && clickCanvas !== canvas.id) {
 						clearTopLayers();
 						
 						clickState = false;
 						
 						prevCanvasLayer = clickCanvas;
 						
 						console.log('previous: ' + prevCanvasLayer);
 						var prevCvs = document.getElementById(prevCanvasLayer + 'Layer');
 						var prevCtx = prevCvs.getContext('2d');
 						
 						var prevCvsXOffset = prevCvs.getBoundingClientRect().left;
 						var prevCvsYOffset = prevCvs.getBoundingClientRect().top;
 						
 						//prevCtx.clearRect(prevCvsXOffset + window.pageXOffset, prevCvsYOffset + window.pageYOffset, prevCvs.width, prevCvs.height);
 						prevCtx.clearRect(0, 0, prevCvs.width, prevCvs.height);
 						prevX2 = -1;
 						prevY2 = -1;
 						
 						clickCanvas = 'none';
 						
 						return;
 					} else {
 						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(context, x1, y1, x2, y2, color) {
 				//window.pageXOffset, window.pageYOffset
 				context.beginPath();
 				//context.rect(x1 - canvasOffsetX + window.pageXOffset, y1 - canvasOffsetY + window.pageYOffset, x2-x1, y2-y1);
 				context.rect(x1 - canvasOffsetX, y1 - canvasOffsetY, x2-x1, y2-y1);
 				console.log('inside draw: ' + window.pageYOffset);
 				context.strokeStyle = color;
 				context.stroke();
 				context.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 onscroll="handleScroll()">
	<!-- 3*x -->
	<!-- 630 891 -->
	<!-- written by Levent Divilioglu / 16.12.2016 -->
	<!-- updated / 28.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)" 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)" 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)" 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>
	(function() {
	// 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");

	prevCanvas = canvas;
	prevCanvasLayer = canvasLayer;

	canvasOffsetX = -1;
	canvasOffsetY = -1;
	handleCanvasOffsets(canvas);
	console.log('offset: ' + canvasOffsetY);

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

	// cache
	clickCanvas = "none";

	//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 handleScroll() {
	console.log('scroll');
	handleCanvasOffsets(canvas);
	}

	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) {
	clickCanvas = canvas.id;

	x1 = event.clientX;
	y1 = event.clientY;

	clickState = true;
	}

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

	if(clickCanvas !== 'none' && clickCanvas !== canvas.id) {
	clearTopLayers();

	clickState = false;

	prevCanvasLayer = clickCanvas;

	console.log('previous: ' + prevCanvasLayer);
	var prevCvs = document.getElementById(prevCanvasLayer + 'Layer');
	var prevCtx = prevCvs.getContext('2d');

	var prevCvsXOffset = prevCvs.getBoundingClientRect().left;
	var prevCvsYOffset = prevCvs.getBoundingClientRect().top;

	//prevCtx.clearRect(prevCvsXOffset + window.pageXOffset, prevCvsYOffset + window.pageYOffset, prevCvs.width, prevCvs.height);
	prevCtx.clearRect(0, 0, prevCvs.width, prevCvs.height);
	prevX2 = -1;
	prevY2 = -1;

	clickCanvas = 'none';

	return;
	} else {
	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(context, x1, y1, x2, y2, color) {
	//window.pageXOffset, window.pageYOffset
	context.beginPath();
	//context.rect(x1 - canvasOffsetX + window.pageXOffset, y1 - canvasOffsetY + window.pageYOffset, x2-x1, y2-y1);
	context.rect(x1 - canvasOffsetX, y1 - canvasOffsetY, x2-x1, y2-y1);
	console.log('inside draw: ' + window.pageYOffset);
	context.strokeStyle = color;
	context.stroke();
	context.closePath();
	}

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