m2web/HTML5CanvasTabExample.html

## HTML5CanvasTabExample.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>Test Canvas</title>

	<!-- get excanvas.js from http://code.google.com/p/explorercanvas/
		Note the test cases and examples. Very cool! -->
	<!--[if IE]>
		<script src="excanvas.js"></script>
	<![endif]-->
</head>

<body>

  <header>
    <hgroup>
	<h1>Testing Canvas Tag</h1>
    </hgroup>
  </header>

  <section>
	<h3>Click on the rectangle to draw a square and move the mouse out of the rectangle to clear it.</h3>
 	<canvas id="a" width="300" height="225" style="border:1px dotted;" onclick="draw_a();return false;" onmouseout="clearRectangle('a');return false;"></canvas>
  </section>

  <section>
	<h3>Click on the rectangle to draw a grid.</h3>
	<canvas id="b" width="500" height="375" style="border:1px dotted;" onclick="draw_b();return false;"></canvas>
	<h3>Click <a href="#" onclick="clearRectangle('b');return false;">here</a> to clear the grid.</h3>
  </section>

  <footer>
    <p>&copy; 2010 <a href="http://www.markmcfadden.tel">Mark McFadden</a></p>
  </footer>

</body>
<script>
	function draw_a()
	{
		var a_canvas = document.getElementById("a");
		//must use "2d". For 2 dimensional perhaps?
		var a_context = a_canvas.getContext("2d");
		a_context.fillRect(50, 25, 150, 100);
	}

	function draw_b()
	{
		var b_canvas = document.getElementById("b");
		var context = b_canvas.getContext("2d");
		//Draw vertical lines (like etching)
		for (var x = 0.5; x < 500; x += 10) {
			//moves the "etcher" to the specified starting point
			context.moveTo(x, 0);
			//etches a line to the specified ending point.
			context.lineTo(x, 375);
		}
		//Draw horizontal lines
		for (var y = 0.5; y < 375; y += 10) {
			context.moveTo(0, y);
			context.lineTo(500, y);
		}
		//now "ink" the etched lines
		context.strokeStyle = "#eee";
		context.stroke();

		//the horizontal arrow
		//draw the arrow in a different color ink — black instead of off-white — so start a new path.
		context.beginPath();
		context.moveTo(0, 40);
		context.lineTo(240, 40);
		context.moveTo(260, 40);
		context.lineTo(500, 40);
		context.moveTo(495, 35);
		context.lineTo(500, 40);
		context.lineTo(495, 45);

		//vertical arrow
		//since the vertical arrow is the same color as the horizontal arrow, do not need to start another new path
		context.moveTo(60, 0);
		context.lineTo(60, 153);
		context.moveTo(60, 173);
		context.lineTo(60, 375);
		context.moveTo(65, 370);
		context.lineTo(60, 375);
		context.lineTo(55, 370);

		context.strokeStyle = "#000";
		context.stroke();

		//text font
		context.font = "bold 12px sans-serif";

		//x axis label
		context.fillText("x", 248, 43);
		//y axis label
		context.fillText("y", 58, 165);

		//upper left corner text
		context.textBaseline = "top";
		context.fillText("( 0 , 0 )", 8, 5);

		//lower right corner text
		context.textAlign = "right";
		context.textBaseline = "bottom";
		context.fillText("( 500 , 375 )", 492, 370);
	}

	function clearRectangle (rec)
	{
		var the_canvas = document.getElementById(rec);
		the_canvas.width = the_canvas.width;
	}
</script>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<title>Test Canvas</title>

	<!-- get excanvas.js from http://code.google.com/p/explorercanvas/
	Note the test cases and examples. Very cool! -->
	<!--[if IE]>
	<script src="excanvas.js"></script>
	<![endif]-->
	</head>

	<body>

	<header>
	<hgroup>
	<h1>Testing Canvas Tag</h1>
	</hgroup>
	</header>

	<section>
	<h3>Click on the rectangle to draw a square and move the mouse out of the rectangle to clear it.</h3>
	<canvas id="a" width="300" height="225" style="border:1px dotted;" onclick="draw_a();return false;" onmouseout="clearRectangle('a');return false;"></canvas>
	</section>

	<section>
	<h3>Click on the rectangle to draw a grid.</h3>
	<canvas id="b" width="500" height="375" style="border:1px dotted;" onclick="draw_b();return false;"></canvas>
	<h3>Click <a href="#" onclick="clearRectangle('b');return false;">here</a> to clear the grid.</h3>
	</section>

	<footer>
	<p>© 2010 <a href="http://www.markmcfadden.tel">Mark McFadden</a></p>
	</footer>

	</body>
	<script>
	function draw_a()
	{
	var a_canvas = document.getElementById("a");
	//must use "2d". For 2 dimensional perhaps?
	var a_context = a_canvas.getContext("2d");
	a_context.fillRect(50, 25, 150, 100);
	}

	function draw_b()
	{
	var b_canvas = document.getElementById("b");
	var context = b_canvas.getContext("2d");
	//Draw vertical lines (like etching)
	for (var x = 0.5; x < 500; x += 10) {
	//moves the "etcher" to the specified starting point
	context.moveTo(x, 0);
	//etches a line to the specified ending point.
	context.lineTo(x, 375);
	}
	//Draw horizontal lines
	for (var y = 0.5; y < 375; y += 10) {
	context.moveTo(0, y);
	context.lineTo(500, y);
	}
	//now "ink" the etched lines
	context.strokeStyle = "#eee";
	context.stroke();

	//the horizontal arrow
	//draw the arrow in a different color ink — black instead of off-white — so start a new path.
	context.beginPath();
	context.moveTo(0, 40);
	context.lineTo(240, 40);
	context.moveTo(260, 40);
	context.lineTo(500, 40);
	context.moveTo(495, 35);
	context.lineTo(500, 40);
	context.lineTo(495, 45);

	//vertical arrow
	//since the vertical arrow is the same color as the horizontal arrow, do not need to start another new path
	context.moveTo(60, 0);
	context.lineTo(60, 153);
	context.moveTo(60, 173);
	context.lineTo(60, 375);
	context.moveTo(65, 370);
	context.lineTo(60, 375);
	context.lineTo(55, 370);

	context.strokeStyle = "#000";
	context.stroke();

	//text font
	context.font = "bold 12px sans-serif";

	//x axis label
	context.fillText("x", 248, 43);
	//y axis label
	context.fillText("y", 58, 165);

	//upper left corner text
	context.textBaseline = "top";
	context.fillText("( 0 , 0 )", 8, 5);

	//lower right corner text
	context.textAlign = "right";
	context.textBaseline = "bottom";
	context.fillText("( 500 , 375 )", 492, 370);
	}

	function clearRectangle (rec)
	{
	var the_canvas = document.getElementById(rec);
	the_canvas.width = the_canvas.width;
	}
	</script>
	</html>