DIR : /home/kozerus/public_html/whiteboard.html

/home/kozerus/public_html

<!DOCTYPE html>
<head>
<meta charset='utf-8' />
<title>HTML5 Whiteboard</title>
<meta name='viewport' content='initial-scale=1.0'>
<style>
* {
	margin: 0;	padding: 0;
}

body, html {
	height: 100%;
}

#myCanvas {
	cursor: crosshair;
    position: fixed;
}
</style>
<script type='text/JavaScript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2'></script>
<script type='text/javascript'>
window.onload = function() {
	var myCanvas = document.getElementById('myCanvas');
	var ctx = myCanvas.getContext('2d');
    
    // Fill Window Width and Height
    myCanvas.width = window.innerWidth;
	myCanvas.height = window.innerHeight;
	
	// Set Background Color
    ctx.fillStyle='#fff';
    ctx.fillRect(0,0,myCanvas.width,myCanvas.height);
	
    // Mouse Event Handlers
	if(myCanvas){
		var isDown = false;
		var canvasX, canvasY;
		ctx.lineWidth = 5;
		
		$(myCanvas)
		.mousedown(function(e){
			isDown = true;
			ctx.beginPath();
			canvasX = e.pageX - myCanvas.offsetLeft;
			canvasY = e.pageY - myCanvas.offsetTop;
			ctx.moveTo(canvasX, canvasY);
		})
		.mousemove(function(e){
			if(isDown !== false) {
				canvasX = e.pageX - myCanvas.offsetLeft;
				canvasY = e.pageY - myCanvas.offsetTop;
				ctx.lineTo(canvasX, canvasY);
				ctx.strokeStyle = '#000';
				ctx.stroke();
			}
		})
		.mouseup(function(e){
			isDown = false;
			ctx.closePath();
		});
	}
	
	// Touch Events Handlers
	draw = {
		started: false,
		start: function(evt) {
			
			ctx.beginPath();
			ctx.moveTo(
				evt.touches[0].pageX,
				evt.touches[0].pageY
			);
			
			this.started = true;

		},
		move: function(evt) {
			
			if (this.started) {
				ctx.lineTo(
					evt.touches[0].pageX,
					evt.touches[0].pageY
				);
				
				ctx.strokeStyle = '#000';
				ctx.lineWidth = 5;
				ctx.stroke();
			}
			
			},
		end: function(evt) {
			this.started = false;
		}
	};
	
	// Touch Events
	myCanvas.addEventListener('touchstart', draw.start, false);
	myCanvas.addEventListener('touchend', draw.end, false);
	myCanvas.addEventListener('touchmove', draw.move, false);
	
	// Disable Page Move
	document.body.addEventListener('touchmove',function(evt){
		evt.preventDefault();
	},false);
};
</script>
</head>
<body>
	<canvas id='myCanvas'>
		Sorry, your browser does not support HTML5 canvas technology.
	</canvas>
</body>
</html>
koh5_pano

Drag mouse to navigate.
Navigation

Left/Right Mouse drag: Changes camera heading.
Up/Sown Mouse drag: Changes camera pitch.
Scroll wheel: Changes camera field of view.
I-Key: Displays Info panel with canvas size, image size and FPS.
17.Aug.2010, Martin Wengenmayer