radar js

<!doctype html>
 <html>
  <head>
   <meta charset="utf-8">
   <link href="style.css" rel="stylesheet" type="text/css">
   <title></title>
  </head>
 <body>
<canvas id="canv"></canvas>
<script src="radar.js" type="text/javascript"></script>
 </body>
</html>

body {
 margin: 0;
 padding: 0;
 overflow:scroll;
 width: 100%;
 background: #FFF;
 font-size: 1.05em;
}

var c = document.getElementById('canv');
 var w = c.width = window.innerWidth*1.5;
 var h = c.height = window.innerHeight*1.5;
 var $ = c.getContext('2d');

 window.addEventListener('resize', function() {
    c.width = window.innerWidth;
    c.height = window.innerHeight;
 }, false);

 function drawOnePoint(xx,yy,r,text) {
     u=2;
     var col = 63;
     var x=w/2+xx*r*3;
     var y=h/2+yy*r*3;
        var g = $.createRadialGradient(x, y, 0, x, y, r);
        g.addColorStop(0, 'hsla(' + col * u + ',95%,70%,1)');
        g.addColorStop(0.5, 'hsla(' + col * u + ',95%,50%,.8)');
        g.addColorStop(1, 'hsla(' + col * u + ',95%,20%,1)');
        $.fillStyle = g;
        $.beginPath();
        $.arc(x, y, r, 0, Math.PI * 2);
        $.fill();
        $.fillText(text,x,y)
 }

 function go() {
    $.fillStyle = 'hsla(0,0%,5%,1)';
    $.fillRect(0, 0, w, h);

    var r=2;
    drawOnePoint(0,0,r,"ap1");
     drawOnePoint(0,1,r,"ap2");
      drawOnePoint(1,0,r,"ap3");
       drawOnePoint(0,-1,r,"ap4");
       drawOnePoint(-1,0,r,"ap5");

      drawOnePoint(0,2,r,"ap2");
      drawOnePoint(2,0,r,"ap3");
       drawOnePoint(0,-2,r,"ap4");
       drawOnePoint(-2,0,r,"ap5");

         drawOnePoint(0,3,r,"ap2");
      drawOnePoint(3,0,r,"ap3");
       drawOnePoint(0,-3,r,"ap4");
       drawOnePoint(-3,0,r,"ap5");

       drawOnePoint(-30,0,r,"ap-30");
       drawOnePoint(0,50,r,"ap-50");
       drawOnePoint(0,70,r,"ap-70");
       drawOnePoint(0,40,r,"ap-40");
       drawOnePoint(0,30,r,"ap-30");
    window.requestAnimationFrame(go);
 }
 go()