Mark's Musings: December 2010

Thursday, December 30, 2010

Lending Kindle eBooks Now Enabled

You can now lend Kindle eBooks. It is still controlled by Digital Rights Management set by the publisher, etc. but it is a next step!

Posted via email from Mark's Musings

Thursday, December 16, 2010

HTML5 Canvas Tag Basic Example II - Gradients and Images

Per my previous post, working with the canvas tag in HTML5, here is some more code with gradients and an image.

Thanks again to Mark Pilgrim and his wonderful Dive into HTML5 site.

Enjoy:

	<!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>

view raw HTML5CanvasTagExample2.html hosted with ❤ by GitHub

Wednesday, December 15, 2010

Loving Posterous' use of Github Gist to post code

Loving Posterous' use of Github Gist to post code in your Posterous blog. Just paste a Github Gist URL on its own line and Posterous pulls in the contents automatically, even for your RSS feed and autopost sites.

Posted via email from Mark's Musings

HTML5 Canvas Tag Basic Example

It has been a while since I posted any example code. Was messing with the canvas tag in HTML5 and thought I would post it up.

Thanks to Mark Pilgrim and his wonderful Dive into HTML5 site, I was working through the canvas tag page and put this together (only got as far as the gradient section though). Enjoy:

	<!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>

view raw HTML5CanvasTabExample.html hosted with ❤ by GitHub