HTML5 Animations

Here is some doodle art with HTML5…

Play with the fiddle at jsfiddle.net or see the embedded result at jsfiddle.net.


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

	// get the canvas element using the DOM
	var canvas = document.getElementById('mycanvas');
	canvas.width = 500;
	canvas.height = 500;
	
	// use getContext to use the canvas for drawing
	var ctx = canvas.getContext('2d');
	
	ctx.beginPath();
	ctx.moveTo(0, 0);
	ctx.lineTo(0, 500);
	ctx.lineTo(500, 500);
	ctx.lineTo(500, 0);
	ctx.lineTo(0, 0);
	ctx.stroke();
	
	var theta = Math.PI/8;
	var size = 30;
	var oPosX = 0;
	var oPosY = 0;
	var fPosX = oPosX+size*Math.cos(theta);
	var fPosY = oPosY+size*Math.sin(theta);

	// Draw Line
	ctx.strokeStyle='#000000';
	ctx.beginPath();
	ctx.moveTo(oPosX, oPosY);
	ctx.lineTo(fPosX, fPosY);
	ctx.stroke();
	
	// call draw every 100 seconds
	setInterval(draw, 10);

	function draw() {
		// Draw Line
		ctx.strokeStyle='#ffffff';
		ctx.beginPath();
		ctx.moveTo(oPosX, oPosY);
		ctx.lineTo(fPosX, fPosY);
		ctx.stroke();

		if(fPosX > 500 || fPosX < 0) {
			theta = Math.PI - theta;
		}
		if (fPosY > 500 || fPosY < 0){
			theta = -theta;
		}
		
		oPosX = oPosX+size/10*Math.cos(theta);
		oPosY = oPosY+size/10*Math.sin(theta);
		fPosX = oPosX+size*Math.cos(theta);
		fPosY = oPosY+size*Math.sin(theta);
		ctx.strokeStyle='#000000';
		ctx.beginPath();
		ctx.moveTo(oPosX, oPosY);
		ctx.lineTo(fPosX, fPosY);
		ctx.stroke();

	}
}
</script>
</head>
<body onload="startDrawingLine();">
   <canvas id="mycanvas"></canvas>
</body>
</html>