sabha · March 12, 2018 21:04 · sabha · Mar 28, 2018
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <script>
 $(document).ready(() => {
    $("#grid").click(() => {	
     
    });
 });
 </script>
 </head>
 <body>

 <canvas id="myCanvas" width="640" height="640" style="border:1px solid #d3d3d3;">
 Your browser does not support the HTML5 canvas tag.</canvas>
 <input id="grid" type="button" style="z-index:2; position:absolute; top:x; left:y" value="Grid"/>

 <script>
 var c = document.getElementById("myCanvas");
 var ctx = c.getContext("2d");
 var width = c.width;
 var height = c.height;
 var w = width-80;
 var h = height-80;
 var cx = width/2;
 var cy = height/2;
 var r = cx-80;
 var Text = (txt,x,y) => ctx.fillText(txt,x,y);
 var toDegrees = (angle) => (angle * (180 / Math.PI));
 var toRadian = (angle) => (angle * (Math.PI / 180));

 ctx.font = "italic small-caps lighter 16px arial";
 ctx.fillStyle="#5d7790";
 ctx.textAlign = "center";

 ctx.strokeStyle="#e5ecf9";
 ctx.lineWidth=.5;

 var off = 40
 for(var v=0;v<=width;v+=off){
 	Text(v,v,20);
 	ctx.moveTo(v,0);
 	ctx.lineTo(v,height);
 	ctx.stroke();
    
 }

 for(var hz=0;hz<=height;hz+=off){
 	ctx.moveTo(0,hz);
 	ctx.lineTo(width,hz);
 	ctx.stroke();
 }

 ctx.beginPath();
 ctx.arc(cx,cy,r,0,2*Math.PI);
 ctx.lineWidth= 5;
 ctx.strokeStyle="#f29c4b";
 ctx.stroke();

 Text(0, cx, cy);
 for(var a=0;a<360;a+=10) {
 	var tx = (r+20)*Math.cos(-toRadian(a))
 	var ty = (r+20)*Math.sin(-toRadian(a))
 	Text(a+'"', tx+cx, ty+cy);
 }



 </script> 

 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script>
	$(document).ready(() => {
	$("#grid").click(() => {

	});
	});
	</script>
	</head>
	<body>

	<canvas id="myCanvas" width="640" height="640" style="border:1px solid #d3d3d3;">
	Your browser does not support the HTML5 canvas tag.</canvas>
	<input id="grid" type="button" style="z-index:2; position:absolute; top:x; left:y" value="Grid"/>

	<script>
	var c = document.getElementById("myCanvas");
	var ctx = c.getContext("2d");
	var width = c.width;
	var height = c.height;
	var w = width-80;
	var h = height-80;
	var cx = width/2;
	var cy = height/2;
	var r = cx-80;
	var Text = (txt,x,y) => ctx.fillText(txt,x,y);
	var toDegrees = (angle) => (angle * (180 / Math.PI));
	var toRadian = (angle) => (angle * (Math.PI / 180));

	ctx.font = "italic small-caps lighter 16px arial";
	ctx.fillStyle="#5d7790";
	ctx.textAlign = "center";

	ctx.strokeStyle="#e5ecf9";
	ctx.lineWidth=.5;

	var off = 40
	for(var v=0;v<=width;v+=off){
	Text(v,v,20);
	ctx.moveTo(v,0);
	ctx.lineTo(v,height);
	ctx.stroke();

	}

	for(var hz=0;hz<=height;hz+=off){
	ctx.moveTo(0,hz);
	ctx.lineTo(width,hz);
	ctx.stroke();
	}

	ctx.beginPath();
	ctx.arc(cx,cy,r,0,2*Math.PI);
	ctx.lineWidth= 5;
	ctx.strokeStyle="#f29c4b";
	ctx.stroke();

	Text(0, cx, cy);
	for(var a=0;a<360;a+=10) {
	var tx = (r+20)*Math.cos(-toRadian(a))
	var ty = (r+20)*Math.sin(-toRadian(a))
	Text(a+'"', tx+cx, ty+cy);
	}



	</script>

	</body>
	</html>