HTML5, JavaScript

Radar screen like animation in HTML5

HTML

<body onload="init();">
	<canvas id="myCanvas" width="600" height="400"></canvas>
</body>

CSS

canvas{
			border:1px solid #000;
		}

JavaScript

var c, ctx;
		var arcLength = 30;//in degrees
		var startAngle = 0;//in degrees
		var endAngle = 360;//in degrees
		var radius = 100;
		var x1 = 300;
		var y1 = 200;

		function init(){
			c = document.querySelector("#myCanvas");
			ctx = c.getContext("2d");
			ctx.strokeStyle = "red";

			draw();
		}

		function draw(){

			setInterval(function(){
				//redraw the canvas
				ctx.fillStyle = "yellow";
				ctx.fillRect(0, 0, c.width, c.height);

				if(endAngle >= 360){
					//reset
					startAngle = 0;
					endAngle = arcLength;
				}
				else{
					//start where the last angle ended
					startAngle = endAngle;
					endAngle += arcLength;
				}

				ctx.beginPath();
				ctx.arc(x1, y1, radius, startAngle*Math.PI/180, endAngle*Math.PI/180);
				ctx.stroke();
				//ctx.closePath();

				// compute x and y coordinates of the end angle relative to canvas
				var x2 = x1 + Math.cos(endAngle * Math.PI / 180) * radius;
				var y2 = y1 + Math.sin(endAngle * Math.PI / 180) * radius;

				console.log('startAngle', startAngle);
				console.log('endAngle', endAngle);

				console.log('x2',x2);
				console.log('y2',y2);

				console.log('x2 end',x2|0);
				console.log('y2 end',y2|0);

				console.log(startAngle*Math.PI);
				console.log(endAngle*Math.PI);

				console.log('***');

				ctx.beginPath();
				ctx.moveTo(x1, y1);
				ctx.lineTo(x2, y2);
				ctx.stroke();
				//ctx.closePath();

			}, 50);
			
		}