Mouse follow experiment fullscreen
follow the mouse fullscreen, because of jsfiddle frames this is not very obvious, but does work
HTML
<body>
<canvas id="myCanvas" width="300" height="500"></canvas>
</body>
JavaScript
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var width = 300;
var height = 600;
var centerX = 100;
var centerY = 200;
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);
$('span').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 + (radians * (180 / Math.PI));
// move
drawSpike(angle);
context.restore();
}
function drawSpike(angle) {
context.save();
context.rotate(deg2Rad(angle));
context.beginPath();
context.moveTo(-3, 0);
context.lineTo(3, 0);
context.lineTo(0, -50);
context.fillStyle = 'red';
context.closePath();
context.fill();
context.strokeStyle = 'black';
context.stroke();
context.restore();
}
function deg2Rad(deg) {
return deg * Math.PI / 180;
}