m2web/HTML5CanvasTagExample2.html

## HTML5CanvasTagExample2.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>Test Canvas II</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 II</h1>
    </hgroup>
  </header>

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

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

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

  <section>
	<h3>Click on the rectangle to display a cat image and move the mouse out of the rectangle to clear it.</h3>
 	<canvas id="d" width="177" height="113" style="border:1px dotted;" onclick="drawCat();return false;" onmouseout="clearRectangle('d');return false;"></canvas>
  </section>

  <section>
	<h3>Click on the rectangle to display a "multi-cat" image and move the mouse out of the rectangle to clear it.</h3>
 	<canvas id="e" width="550" height="387" style="border:1px dotted;" onclick="drawMultiCat();return false;" onmouseout="clearRectangle('e');return false;"></canvas>
  </section>

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

</body>
<script>

	function drawGradient(id, x0, y0, x1, y1)
	{
		//chained the method calls here
		var the_context = document.getElementById(id).getContext('2d');
		//createLinearGradient(x0, y0, x1, y1)
		var my_gradient = the_context.createLinearGradient(x0, y0, x1, y1);
		//define a gradient that shades from black to white
		my_gradient.addColorStop(0, "black");
		my_gradient.addColorStop(1, "white");
		//fill style is a gradient
		the_context.fillStyle = my_gradient;
		the_context.fillRect(0, 0, 300, 225);
	}

	function drawCat()
	{
		var context = document.getElementById("d").getContext("2d");
		//using an Image() object
		var cat = new Image();
		//the image
		cat.src = "cat.png";
		cat.onload = function() {
			//drawImage(image, dx, dy). Coordinates (0, 0) will draw the image at
			//the upper-left corner of the canvas
			context.drawImage(cat, 0, 0);
		};
	}

	function drawMultiCat()
	{
		var context = document.getElementById("e").getContext("2d");
		var cat = new Image();
		cat.src = "cat.png";
		cat.onload = function() {
			for (var x = 0, y = 0; x < 500 && y < 375; x += 50, y += 37) {
				//drawImage(image, dx, dy, dw, dh) used below takes an image, scales it to
				//a width of dw and a height of dh, and draws it on the canvas at
				//coordinates (dx, dy)
				context.drawImage(cat, x, y, 88, 56);
			}
		};
	}


	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 II</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 II</h1>
	</hgroup>
	</header>

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

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

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

	<section>
	<h3>Click on the rectangle to display a cat image and move the mouse out of the rectangle to clear it.</h3>
	<canvas id="d" width="177" height="113" style="border:1px dotted;" onclick="drawCat();return false;" onmouseout="clearRectangle('d');return false;"></canvas>
	</section>

	<section>
	<h3>Click on the rectangle to display a "multi-cat" image and move the mouse out of the rectangle to clear it.</h3>
	<canvas id="e" width="550" height="387" style="border:1px dotted;" onclick="drawMultiCat();return false;" onmouseout="clearRectangle('e');return false;"></canvas>
	</section>

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

	</body>
	<script>

	function drawGradient(id, x0, y0, x1, y1)
	{
	//chained the method calls here
	var the_context = document.getElementById(id).getContext('2d');
	//createLinearGradient(x0, y0, x1, y1)
	var my_gradient = the_context.createLinearGradient(x0, y0, x1, y1);
	//define a gradient that shades from black to white
	my_gradient.addColorStop(0, "black");
	my_gradient.addColorStop(1, "white");
	//fill style is a gradient
	the_context.fillStyle = my_gradient;
	the_context.fillRect(0, 0, 300, 225);
	}

	function drawCat()
	{
	var context = document.getElementById("d").getContext("2d");
	//using an Image() object
	var cat = new Image();
	//the image
	cat.src = "cat.png";
	cat.onload = function() {
	//drawImage(image, dx, dy). Coordinates (0, 0) will draw the image at
	//the upper-left corner of the canvas
	context.drawImage(cat, 0, 0);
	};
	}

	function drawMultiCat()
	{
	var context = document.getElementById("e").getContext("2d");
	var cat = new Image();
	cat.src = "cat.png";
	cat.onload = function() {
	for (var x = 0, y = 0; x < 500 && y < 375; x += 50, y += 37) {
	//drawImage(image, dx, dy, dw, dh) used below takes an image, scales it to
	//a width of dw and a height of dh, and draws it on the canvas at
	//coordinates (dx, dy)
	context.drawImage(cat, x, y, 88, 56);
	}
	};
	}


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