DIR : /home/kozerus/public_html/konet/ko_canvas1.html

/home/kozerus/public_html/konet

<html>
<head>
	<title>/ko/ko_canvas.html 20230108_1000</title>

	<style id=style_canvas>
		canvas { border: 2px solid black; }
		</style>

	<script id=script_canvas>

// var canvas = document.getElementById("div_canvas");
	function startup(args) {
		alert( "BUGS_100 script_canvas args="+args );

		var canvas = document.getElementById("canvas_canvas");
		var ctx = canvas.getContext("2d");
		ctx.font = "16px Arial";
		canvas.addEventListener("mousemove", function(e) { 
			var cRect = canvas.getBoundingClientRect();              // Gets the CSS positions along with width/height
			var canvasX = Math.round(e.clientX - cRect.left);        // Subtract the 'left' of the canvas from the X/Y
			var canvasY = Math.round(e.clientY - cRect.top);         // positions to get make (0,0) the top left of the 
			ctx.clearRect(0, 0, canvas.width, canvas.height);        // canvas
			ctx.fillText("X: "+canvasX+", Y: "+canvasY, 10, 20);
			});
		}
		</script id=script_canvas_end>
	</head>

<body bgcolor=linen onload="startup('');" >

	<h1>div_canvas</h1>
	<hr color=goldenrod>
	<div id=div_canvas>
		<canvas id=canvas_canvas></canvas>
		</div id=div_canvas_end>
	<hr color=goldenrod>
	</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