ijason/html5-panoramic.php

## html5-panoramic.php
<!DOCTYPE html>
<html lang="en">
  <?php include("Includes/metadata.php"); ?>
	<body style="width=100%">
	    <div style="text-align:center;">
			<h1>HTML5 - Panoramic Image Scroller</h1>
			<br /><br />
			<div><canvas id="canvas" width="800" height="400"></canvas></div>
			<br /><br />
			<p>Image taken at Code Magazine's State of .NET event in Austin, Texas</p>
		</div>
	<!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script type="text/javascript">
		var img = new Image();

		//User Variables
		img.src = '/Media/StateOfDotNET.JPG';
		var CanvasXSize = 800; //width of canvas element
		var CanvasYSize = 400; //height of canvas element
		var speed = 30; //lower is faster
		var scale = 1.05;
		var y = -4.5; //vertical offset

		var dx = 0.75;
		var imgW; //image width
		var imgH; //image height
		var x = 0;
		var clearX;
		var clearY;
		var ctx; //canvas element

		img.onload = function() {
    		imgW = img.width*scale;
    		imgH = img.height*scale;
    		if (imgW > CanvasXSize) { x = CanvasXSize-imgW; } // image larger than canvas
    		if (imgW > CanvasXSize) { clearX = imgW; } // image larger than canvas
    		else { clearX = CanvasXSize; }
    		if (imgH > CanvasYSize) { clearY = imgH; } // image larger than canvas
    		else { clearY = CanvasYSize; }
    		//Get Canvas Element
    		ctx = document.getElementById('canvas').getContext('2d');
    		//Set Refresh Rate
    		return setInterval(draw, speed);
		}

		function draw() {
    		//Clear Canvas
    		ctx.clearRect(0,0,clearX,clearY);
    		//If image is <= Canvas Size
    		if (imgW <= CanvasXSize) {
       	 	//reset, start from beginning
        		if (x > (CanvasXSize)) { x = 0; }
        		//draw aditional image
        		if (x > (CanvasXSize-imgW)) { ctx.drawImage(img,x-CanvasXSize+1,y,imgW,imgH); }
    		}
    		//If image is > Canvas Size
    		else {
        		//reset, start from beginning
        		if (x > (CanvasXSize)) { x = CanvasXSize-imgW; }
        		//draw aditional image
        		if (x > (CanvasXSize-imgW)) { ctx.drawImage(img,x-imgW+1,y,imgW,imgH); }
    		}
    		//draw image
    		ctx.drawImage(img,x,y,imgW,imgH);
    		//amount to move
    		x += dx;
		}
	</script>
	</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<?php include("Includes/metadata.php"); ?>
	<body style="width=100%">
	<div style="text-align:center;">
	<h1>HTML5 - Panoramic Image Scroller</h1>
	<br /><br />
	<div><canvas id="canvas" width="800" height="400"></canvas></div>
	<br /><br />
	<p>Image taken at Code Magazine's State of .NET event in Austin, Texas</p>
	</div>
	<!-- Le javascript
	================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<script type="text/javascript">
	var img = new Image();

	//User Variables
	img.src = '/Media/StateOfDotNET.JPG';
	var CanvasXSize = 800; //width of canvas element
	var CanvasYSize = 400; //height of canvas element
	var speed = 30; //lower is faster
	var scale = 1.05;
	var y = -4.5; //vertical offset

	var dx = 0.75;
	var imgW; //image width
	var imgH; //image height
	var x = 0;
	var clearX;
	var clearY;
	var ctx; //canvas element

	img.onload = function() {
	imgW = img.width*scale;
	imgH = img.height*scale;
	if (imgW > CanvasXSize) { x = CanvasXSize-imgW; } // image larger than canvas
	if (imgW > CanvasXSize) { clearX = imgW; } // image larger than canvas
	else { clearX = CanvasXSize; }
	if (imgH > CanvasYSize) { clearY = imgH; } // image larger than canvas
	else { clearY = CanvasYSize; }
	//Get Canvas Element
	ctx = document.getElementById('canvas').getContext('2d');
	//Set Refresh Rate
	return setInterval(draw, speed);
	}

	function draw() {
	//Clear Canvas
	ctx.clearRect(0,0,clearX,clearY);
	//If image is <= Canvas Size
	if (imgW <= CanvasXSize) {
	//reset, start from beginning
	if (x > (CanvasXSize)) { x = 0; }
	//draw aditional image
	if (x > (CanvasXSize-imgW)) { ctx.drawImage(img,x-CanvasXSize+1,y,imgW,imgH); }
	}
	//If image is > Canvas Size
	else {
	//reset, start from beginning
	if (x > (CanvasXSize)) { x = CanvasXSize-imgW; }
	//draw aditional image
	if (x > (CanvasXSize-imgW)) { ctx.drawImage(img,x-imgW+1,y,imgW,imgH); }
	}
	//draw image
	ctx.drawImage(img,x,y,imgW,imgH);
	//amount to move
	x += dx;
	}
	</script>
	</body>
	</html>