how do i rotate a rectangle to point towards mouse

Question

I need help rotating a rectangle to point towards the mouse on the screen every time the mouse moves. ive been trying to do so using the onmousemove event and calculating degrees/angle, then converting to radians, but for some reason when i place the radians variable rad inside rotate();, the rectangle does not rotate at all.

<!DOCTYPE html>
<html>
<head>
<title>Rotate Rectangle Project</title>
<style>
canvas {
background:#f05424; display: block; margin: 0 auto;
}
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>

<canvas id="myCanvas" width=500 height=500 top=10px></canvas>
<p id='coord'>0</p>
<p id='degree'>0</p>
<p id='radian'>0</p>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext("2d");




var x = 100;
var y = 100;
var w = 100;
var h = 30;
var rX, rY, mX, mY, degrees, rad, coords;

document.onmousemove = function(e){
rX =533;
rY =100;

mX = e.clientX;
mY = e.clientY;

coords = mX + ',' + mY;
degrees = mY - rY + mX - rX;


rad = Math.atan2(mY - rY, mX - rX)* Math.PI/180;
draw();

document.getElementById('coord').innerHTML = coords;
document.getElementById('degree').innerHTML = degrees;
document.getElementById('radian').innerHTML = rad;
};



function rectangle(){

ctx.beginPath();
ctx.translate(x, y);
ctx.rotate(rad);
ctx.translate(-x, -y);
ctx.rect(x, y, w, h);
ctx.fillStyle = '#f8c778';
ctx.fill();
ctx.closePath();


}
function draw(){
ctx.clearRect(x,y,canvas.width,canvas.height);
rectangle();
}









</script>
</body>
</html>

Ahh, thanks i appreciate it, im kinda new to programming lol. — Rodney Ramsay, Aug 08 '16 at 06:38

score -2 · Accepted Answer · answered Aug 08 '16 at 06:31

I have edited your code, basically you need to call rectangle on onmousemove and clear the canvas.

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext("2d");
var x = 100;
var y = 100;
var w = 100;
var h = 30;
var mouseX, mouseY, degrees, rad, coords;

document.onmousemove = function(e) {
  mouseX = e.clientX;
  mouseY = e.clientY;
  coords = mouseX + ',' + mouseY;
  degrees = mouseY - y + mouseX - x;
  rad = Math.atan2(mouseY - y, mouseX - x) * (180 / Math.PI);
  rectangle();
};



function rectangle() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.translate(x, y);
  ctx.rotate(rad);
  ctx.translate(-x, -y);
  ctx.rect(x, y, w, h);
  ctx.fillStyle = '#f8c778';
  ctx.fill();
  ctx.closePath();
}

body {
  margin: 0px;
  padding: 0px;
}

canvas {
  background: #f05424;
  display: block;
  margin: 0 auto;
}

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

interesting, I have applied this to my code and I realised that the rectangle spins uncontrollably. Shouldn't the rectangle point at the mouse cords when the radian is found through the onmousemove event? ive updated my code and changed various variables in hope to fix the problem of getting the rectangle to point at the mouse cords but nothing has worked thus far... — Rodney Ramsay, Aug 08 '16 at 20:18
This is very glitchy, and the rectangle does not move smoothly. Are you sure this was your desired outcome? — Scollier, Aug 23 '22 at 00:51

how do i rotate a rectangle to point towards mouse

1 Answers1