function radians(degrees) {

  return degrees * (Math.PI / 180);

}

​

var timer = 0;

function sonar() {

  var canvas = document.getElementById('sonar');

  if (canvas) {

    var ctx = canvas.getContext('2d');

    var cx = innerWidth / 2,

        cy = innerHeight / 2;

​

    canvas.width = innerWidth;

    canvas.height = innerHeight;

​

    //ctx.clearRect(0, 0, innerWidth, innerHeight);

    ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';

    ctx.fillRect(0, 0, innerWidth, innerHeight);

​

    var radii = [cy, cy - 30, innerHeight / 3.33, innerHeight / 6.67];

​

    for (var a = 0; a < 4; a++) {

      ctx.beginPath();

      ctx.arc(cx, cy, radii[a], radians(0), radians(360), false);

      ctx.strokeStyle = 'limegreen';

      ctx.stroke();

      ctx.closePath();

    }

​

    // draw grid lines

    for (var i = 0; i < 12; i++) {

      var x = cx + cy * Math.cos(radians(i * 30));

      var y = cy + cy * Math.sin(radians(i * 30));

      ctx.beginPath();

      ctx.moveTo(cx, cy);

      ctx.lineTo(x, y);

      ctx.lineCap = 'round';

      ctx.strokeStyle = 'rgba(50, 205, 50, 0.45)';

      ctx.stroke();

      ctx.closePath();

    }

​

    if (timer <= 360) {

      timer++;

      ctx.beginPath();

      ctx.fillstyle = 'limegreen';

      ctx.moveTo(cx, cy);

      ctx.lineTo(cx + cy * Math.cos(radians(timer)), cy + cy * Math.sin(radians(timer)));

      ctx.strokeStyle = 'limegreen';

      ctx.stroke();

      ctx.closePath();

    } else {

      timer = 0;

    }

    requestAnimationFrame(sonar);

  }

}

sonar();

​