////============================================
//// expo06b.js, 06/04/09, by ralph abraham
//// draw two lines, same color, over (i hope) a background image

//// SETUP

	// wait for the browser to load
	window.onload = function() {
	// set up background basic template
		base00(); // draw entire canvas
		drawlines();
	};
	
    // setup single white canvas
	function base00()  {
		var canvas = document.getElementById("canvas"); // only one canvas
		var ctx = canvas.getContext("2d");
		// setup whole rectangle (x0, y0, width, height)
		ctx.clearRect(0, 0, 320, 280);
 		ctx.fillStyle = "white"; //  white
 		ctx.fillRect (0, 0, 320, 280);
	};
	
	// draw someting on the canvas
	function drawlines() {
		var canvas = document.getElementById("canvas"); // only one canvas
		var ctx = canvas.getContext("2d");
		var img = new Image(); // cf wagner p. 131
		img.src = 'Images/kolkata.jpg'; // choose an image file from somewhere
		img.onload = function() {
			ctx.drawImage( img, 0, 0, 320, 280 ); // copy the image at canvas coords (0, 0), width, height
			ctx.strokeStyle = "blue"; //  white
			ctx.lineWidth = 2; // little wider than default width (1 pixel)
			ctx.beginPath(); // open a path staring here
			ctx.moveTo(20, 20); // go here without drawing
			ctx.lineTo(300, 260); // draw a line segment to there
			ctx.moveTo(20, 260); // go here without drawing
			ctx.lineTo(300, 20); // draw a line segment to there
			ctx.stroke(); // ink the line segment
			ctx.closePath(); // end the path definition
		}
	};

    
////////// END ///////////