Common Downloads, FireFox and CutePDF

Sometimes the latest versions of Firefox and Selenium WebDriver are not compatible. See ftp.mozilla.org for the Firefox 25 download.

It is good to install FireBug (getfirebug.com) and FireFinder (addons.mozilla.org) to be able to inspect code. To inspect, right click and select inspect element.

Here is a FireFinder filter to find all images on the page or all anchor tags which link to Google.


h1,h2,h3,h4,h5,h6
//img
//a[@href="www.google.com"]

Cute PDF Writer to print PDF files (www.cutepdf.com).

Advertisements

Drawing on a Web Page with HTML 5

The page www.tutorialspoint.com introduces drawing in HTML 5.

We will start with how to draw a line, always assuming that you are new and in an attempt to remain self contained.

This example draws a line.


<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function drawLine(){
	// get the canvas element using the DOM
	var canvas = document.getElementById('mycanvas');

	// use getContext to use the canvas for drawing
	var ctx = canvas.getContext('2d');

	// Draw Line
	ctx.beginPath();
	ctx.moveTo(25,100);
	ctx.lineTo(125,100);
	ctx.closePath();
	ctx.stroke();
}
</script>
</head>
<body onload="drawLine();">
   <canvas id="mycanvas"></canvas>
</body>
</html>

This will animate a line being drawn over and over.


<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function startDrawingLine(){

	// get the canvas element using the DOM
	var canvas = document.getElementById('mycanvas');

	// use getContext to use the canvas for drawing
	var ctx = canvas.getContext('2d');

	var loc = 25;

	// call draw every 100 seconds
	setInterval(draw, 100);

	function draw() {
		// Draw Line
		ctx.beginPath();
		ctx.moveTo(loc,100);
		ctx.lineTo(loc+10,100);
		ctx.closePath();
		ctx.stroke();
		loc = loc + 10;

		if(loc > 500) {
			ctx.clearRect(0,0,500,500); // clear canvas
			loc = 25;
		}
	}
}
</script>
</head>
<body onload="startDrawingLine();">
   <canvas id="mycanvas"></canvas>
</body>
</html>

This will animate a circle being drawn and is taken from html5demos.com.


<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function startDrawingArcs(){

	// get the canvas element using the DOM
	var canvas = document.getElementById('mycanvas');

	// use getContext to use the canvas for drawing
	var ctx = canvas.getContext('2d');

	var i = 0;

	// call draw every 100 seconds
	setInterval(draw, 100);

	function draw() {
		var x, y, size, degrees;
		var d, c, s, e;

		x = 50;
		y = 50;
		size = 20;
		degrees = 30;

		d = i;
		c = Math.floor(255/degrees*i);
		s = Math.floor(360/degrees*(d));
		e = Math.floor(360/degrees*(d+1)) - 1;

		ctx.strokeStyle = 'rgb(' + c + ', ' + c + ', ' + c + ')';
		ctx.lineWidth = size;
		ctx.beginPath();
		ctx.arc(x, y, size, (Math.PI/180)*s, (Math.PI/180)*e, false);
		ctx.stroke();

		i++;
		if (i >= degrees) {
		  i = 0;
		  ctx.clearRect(0,0,100,100); // clear canvas
		}
	}
}
</script>
</head>
<body onload="startDrawingArcs();">
   <canvas id="mycanvas"></canvas>
</body>
</html>

Donate.