JSFiddle - React, Tailwind, and code Playground

by Laxmikant Dange

HTML

<canvas id="can" ></canvas>

JavaScript

var can=$("#can")[0];
var ctx=can.getContext("2d");
ctx.canvas.width=500;
ctx.canvas.height=500;
ctx.fillStyle="#000000"
ctx.fillRect(0,0,1500,500);
var prevPos={x:0,y:0}
$(document).on("mousemove",function(e){
	var pos={
  	x:e.offsetX,
    y:e.offsetY
  };
  ctx.beginPath();
  ctx.arc(pos.x,pos.y,3,0,2*Math.PI);
   
  ctx.fillStyle = 'white';
  ctx.strokeStyle = '#ffffff';
  ctx.lineWidth = 1;
  ctx.shadowColor = '#aaaaff';
  ctx.shadowBlur = 20;
 	ctx.shadowOffsetX = 0;
  ctx.shadowOffsetY = 0;
  ctx.stroke();
  ctx.fill();
  ctx.closePath();
  ctx.shadowBlur = 0;
  
  prevPos.x=pos.x;
  prevPos.y=pos.y;
});

setInterval(function(){
	ctx.fillStyle="rgba(0,0,0,0.2)"
	ctx.fillRect(0,0,1500,500);
},50);

/*
https://codepen.io/falldowngoboone/pen/PwzPYv
*/