JSFiddle - React, Tailwind, and code Playground

by electronoob

HTML

<canvas id=canvas width=550px height=550px style="background-color:#c0c0c0;"></canvas>

CSS

body {
  margin:0px;
  padding:0px;
}

JavaScript

var mX = 0;
 var mY = 0;
 var canvas = document.getElementById('canvas');
  var screenContext = canvas.getContext('2d');
  var imageObj = {red:200,green:10,blue:88};
draw();
    
    
	document.getElementById('canvas').addEventListener('mousemove', function(evt) {
      var mousePos = getMousePos(canvas, evt);
      mX = mousePos.x;
      mY = mousePos.y;
    }, false);
    
	function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
      x: evt.clientX - rect.left,
      y: evt.clientY - rect.top
    };
  }


  function draw() {
    var ctx = document.getElementById('canvas').getContext('2d');
    ctx.globalCompositeOperation = 'destination-under';
    ctx.clearRect(0, 0, 550, 550);
  	screenContext.strokeStyle = 'rgba('+imageObj.red+','+imageObj.green+','+imageObj.blue+',0.4)';
    screenContext.lineWidth = 2;
    screenContext.beginPath();
    screenContext.arc(275, 275, 200, 0, Math.PI * 2, false);
    screenContext.stroke();
    
    screenContext.lineWidth = 2;


   
   screenContext.lineWidth = 1;


    screenContext.beginPath();
    screenContext.arc(mX, mY, 5, 0, Math.PI * 2, false);
    screenContext.fillStyle = '#ffffff';
    screenContext.fill();
    screenContext.stroke();
    screenContext.lineWidth = 1;

		radians = Math.atan2(275 - mY, 275 - mX);
    length = (Math.abs(mX - 275)^2) + (Math.abs(mX - 275)^2) ;
    
    
    circx = 275 + (length * Math.cos(radians + Math.PI));
    circy = 275 + (length * Math.sin(radians + Math.PI));
    screenContext.beginPath();
    screenContext.strokeStyle = 'rgba(255,255,255,1)';
    screenContext.lineWidth = 3;
    
screenContext.moveTo(275,275);
screenContext.lineTo(circx,circy);
screenContext.stroke();

window.requestAnimationFrame(draw);
  }