JSFiddle - React, Tailwind, and code Playground

by helxsz

HTML

<!-- 
Fun with canvas and blur 
Move the mouse over the canvas to see what it does
-->

CSS

canvas{background:#6cf;cursor:none;}
ul{position:absolute;right:0;top:30px;font-family:arial;
width:150px;}

JavaScript

/*
  Shadow with blur simulation
  hacked together by Chris Heilmann (@codepo8)
*/

var container = document.createElement( 'ul' );
document.body.appendChild( container );

var canvas = document.createElement( 'canvas' );
document.body.appendChild( canvas );

c = canvas.getContext( '2d' );
canvas.width = 400;
canvas.height = 400;
c.strokeStyle = "#000";
c.lineWidth = 2;

var mouseX = 0,
    mouseY = 0,
    hw = canvas.width / 2,
    hh = canvas.height / 2,
    shadowmultiplier = 0.4;

canvas.addEventListener( 'mousemove', function( event) {
  if(event.offsetX){
    mouseX = event.offsetX;
    mouseY = event.offsetY;
  } else {
    mouseX = event.pageX - event.target.offsetLeft;
    mouseY = event.pageY - event.target.offsetTop;
  }
  draw();
}, false );

function draw() {
  c.clearRect(0,0,canvas.width, canvas.height);
  drawline(c);
}

function drawline(c){

  var distx = (mouseX-hw),
      disty = (mouseY-hh),
      realdistance = Math.sqrt( ( distx * distx ) + ( disty * disty ) ),
      blur = Math.round( realdistance / ( hw / 8 ) ) + 2;

  container.innerHTML = ''+
    '<li>mouse-x: ' + mouseX + '</li>'+
    '<li>mouse-y: ' + mouseY + '</li>'+
    '<li>centred-x: ' + distx + '</li>'+
    '<li>centred-y: ' + disty + '</li>'+
    '<li>distance: ' + todec(realdistance) + '</li>'+
    '<li>shadow-x: ' + todec(-(distx * shadowmultiplier)) + '</li>'+
    '<li>shadow-y: ' + todec(-(disty * shadowmultiplier)) + '</li>'+
    '<li>blur: '+ blur + '</li>';

  c.save();

  // line to show distance
  c.translate(hw,hh);
  c.beginPath();
  c.strokeStyle = "rgba(0,0,0,0.3)";
  c.lineWidth = 2;
  c.moveTo(0,0);
  c.lineTo(distx,disty);
  c.closePath();
  c.stroke();


  // shadow line
  c.beginPath();
  c.strokeStyle = "rgba(128,0,0,0.3)";
  c.lineWidth = 2;
  c.moveTo(0,0);
  c.lineTo( -distx * shadowmultiplier, -disty * shadowmultiplier );
  c.closePath();
  c.stroke();
  c.restore();
    
  // shape and shadow
  var alpha = (1-(blur/10));
  if(alpha < 0.25){alpha =...