Canvas Simple Mouse Interaction

index.html

<canvas id="picture" width=960 height=500></canvas>

<script>
var canvas = document.getElementById("picture");
var ctx = canvas.getContext("2d");
var width = canvas.width;
var height = canvas.height;

ctx.translate(width/2,height/2);
ctx.globalAlpha = 0.4;
ctx.globalCompositeOperation = "darker";

function render(x) {
  ctx.fillStyle = "hsl(" + Math.round(x) + ",50%,50%)";
  ctx.rotate(0.03);
  ctx.fillRect(10,10,2,x);
};

canvas.addEventListener("mousemove", function(e) {
  var x = 1000/Math.sqrt(Math.abs(e.pageX-width/2));
  render(x);
});

</script>