Mouse follow move

move with restrictions follow the mouse fullscreen, because of jsfiddle frames this is not very obvious, but does work

by rob Davis

HTML

<body>
    <span class="mouse"></span>
<span class="other"></span>

    <canvas id="myCanvas" width="500" height="500"></canvas> 
</body>

CSS

body {
          margin: 0px;
          padding: 0px;
          background-color:white;
      }
canvas { border: 1px solid black; }

JavaScript

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

var width = 500;
var height = 500;
var centerX = width/2;
var centerY = height/2;
var maxDistanceFromCenter=100;
update(0,0,centerX,centerY);

$(window).mousemove(function (event) {
    var pageCoords = "( " + event.pageX + ", " + event.pageY + " )";
    var clientCoords = "( " + event.clientX + ", " + event.clientY + " )";
    update(event.pageX, event.pageY, centerX, centerY);
    $('.mouse').html(pageCoords + ' ' + clientCoords);
});

function update(mX,mY,cX,cY) {
    context.clearRect ( 0 , 0 , width , height );
    context.save();
    // center
    context.translate(cX,cY);
    context.fillStyle='black';
    context.fillRect(-3,-3,6,6);
    // set angle
    var radians = Math.atan2(mY - cY, mX - cX);
    var angle = 90 + rad2Deg(radians);
    // move
    var distance = getDistance(mX,mY,cX,cY);
    if (distance > maxDistanceFromCenter) {
        distance=maxDistanceFromCenter;
    }
    var newPoint = getNewPoint(radians, distance)
    drawSpike(angle, 'red');
    context.translate(newPoint.x, newPoint.y);
    drawSpike(angle, 'green');
    context.restore();
}

function drawSpike(angle, style) {
    context.save();
    context.rotate(deg2Rad(angle));
    context.beginPath();
    context.moveTo(-10, 0);
    context.lineTo(10, 0);
    context.lineTo(0, -80);
    context.fillStyle = style;
    context.closePath();
    context.fill();
    context.strokeStyle = 'black';
    context.stroke();
    context.restore();
}

// Get the distance between two points
function getDistance(p1X, p1Y, p2X, p2Y) {
    var xDist = p1X - p2X;
    var yDist = p1Y - p2Y;
    return Math.sqrt(xDist * xDist + yDist * yDist);
}

// Get a new point relative to 0,0 based on supplied angle and distance
// object returned as {x,y}
function getNewPoint(radians, distance) {
    var x = distance * Math.cos(radians);
    var y = distance * Math.sin(radians);
    return {x:x, y:y};
}

function...