JSFiddle - React, Tailwind, and code Playground

by gmcalab

HTML

<canvas id='radar' width="200" height='200'></canvas>
<canvas id='sweep' width="200" height='200'></canvas>

<div id='badge'>

</div>

CSS

#badge {
  position: absolute;
  margin: 25px;
  border: 5px solid blue;
  z-index: 3;
  height: 180px;
  width: 180px;
  border-radius: 100px;
  background-color: blue;
  
}

#radar {

  border-radius: 0;
  background-color: #006600;
  border-radius: 100px;


}

canvas {
  position: absolute;
  margin: 20px;
  border: 0 solid #0CCD0D;
}

#sweep {
  z-index: 2;
}

#radar {
  z-index: 1;
}

body {
  background-color: black;
}

JavaScript

let angle = -90;
  let s = 200;
  let p = .90;

  function radar() {
    let canvas = document.querySelector("#sweep");
    let context = canvas.getContext("2d");


    context.clearRect(0, 0, s, s);

    // sweep
    context.beginPath();
    const x1 = s / 2;
    const y1 = s / 2;
    const length = s / 2;

    const x2 = x1 + Math.cos((angle) * (Math.PI / 180)) * length;
    const y2 = y1 + Math.sin((angle) * (Math.PI / 180)) * length;

    context.moveTo(x2, y2);
    context.lineTo(x1, y1);
    //context.lineWidth = 3;
    context.strokeStyle = '#0CCD0D';
    // ctx.shadowBlur = 50;
    // ctx.shadowColor = "rgba(21, 24, 50, 0.3)";


    const fade = 360 * p;

    const x3 = x1 + Math.cos((angle + fade) * (Math.PI / 180)) * length;
    const y3 = y1 + Math.sin((angle + fade) * (Math.PI / 180)) * length;
    context.moveTo(x3, y3);
    context.lineTo(x1, y1);


    //x,y,r,start, end
    context.arc(s / 2, s / 2, length, angle / 180 * Math.PI, (angle + fade) / 180 * Math.PI, false);

    context.fillStyle = '#0CCD0D';



    context.stroke();
    context.fill();



  }


  radar();