JSFiddle - React, Tailwind, and code Playground

by Zevan

HTML

<div id="center">
<canvas id="canvas" width="300" height="300">your browser doesn't support canvas, you should use chrome. <a href="http://www.google.com/chrome/" target="blank">Download it here</a></canvas>

<p>move your mouse</p>
</div>
<script>
    var mouseX = 0, mouseY = 0;
    var canvas, c;
    $(function(){
    
    
   
    
    canvas = $("#canvas");
    
    var offset = canvas.offset();
    
    canvas = canvas[0];
    
    c = canvas.getContext("2d");
    
   
    $(document).mousemove(function(e){
      // recalculate offset if the canvas might move around the page (relative position counts here)
      mouseX = e.pageX - offset.left;
      mouseY = e.pageY - offset.top;
    // console.log(mouseX);
    });
    
    setup();
    
    setInterval(draw, 30);
    });
</script>

CSS

body,html{
    margin : 0;
    padding : 0; 
    background-color : #333;
    font-family : sans-serif;
    font-size : 11px;
    color : white; 
    
}

#center{
  position : relative;
  width : 300px;
  height : 300px;
  margin-top: 10px;
  margin-left : auto;
  margin-right : auto; 
}

p{
    margin : 5px;   
}

JavaScript

function setup() {
    c.fillStyle = "black";
    c.fillRect(0, 0, canvas.width, canvas.height);
}

function draw() {
    c.fillStyle = "rgba(0,0,0,0.05)";
    c.fillRect(0, 0, canvas.width, canvas.height);
    
    c.save();
    
    c.translate(mouseX, mouseY);
    c.rotate(mouseX / 50);
   
    c.fillStyle = "hsla(" + mouseX + ", 100%, " + Math.max(20, mouseY / 3) + "%,  0.5)";
    c.fillRect(-15, -15, 30, 30);
    c.restore();
   
}