animation - javascript move x pixels towards mouse -

animation - javascript move x pixels towards mouse -

i have robot on webpage, , robot has 1 eye. want have eye follow mouse.

so loaded both on canvas, found x , y of eye , x , y of mouse, have problem moving toward mouse. tried pythagoras, ended finding angle math.atan2, didnt understand had there, because 0 degrees right, left -180 etc... anyways: im mess @ this. can help me? code have without tryouts below:

the eye has 4 pixels room on every side! thanks!

// canvas , context var canvas = document.getelementbyid('robot'); var ctx = canvas.getcontext('2d'); // wheres eye var x = 140, y = 80; var rect = document.getelementbyid('robot').getboundingclientrect(); var eyex = rect.left + x; var eyey = rect.top + y; // draw our robot on top of robot = new image(); robot.src = "robot.png"; robot.onload = function() { ctx.drawimage(robot, 0, 0); }; // give our friend eye. has been friendly eye = new image(); eye.src = "eye.png"; eye.onload = function() { ctx.drawimage(eye, x, y); }; // handle mouse var mousepos; window.onmousemove = handlemousemove; function handlemousemove(event) { event = event || window.event; // ie-ism mousepos = { x: event.clientx, y: event.clienty }; } // animate eye towards mouse. var interval = setinterval(function() { homecoming function() { ctx.clearrect(0, 0, ctx.canvas.width, ctx.canvas.height); ctx.drawimage(robot, 0, 0); var pos = mousepos; if (!pos) { // no motion yet } else { // alter x , y based on direction // help me guys } ctx.drawimage(eye, x, y); }; }(), 1000 / 40);

full working answer, reply below helped, fixed this.

// canvas , context var canvas = document.getelementbyid('robot'); var ctx = canvas.getcontext('2d'); // wheres eye var x = 140, y = 80; var rect = document.getelementbyid('robot').getboundingclientrect(); var eyex = rect.left + x; var eyey = rect.top + y; var offset = 4; // draw our robot on top of robot = new image(); robot.src = "robot.png"; robot.onload = function() { ctx.drawimage(robot, 0, 0); }; // give our friend eye. has been friendly eye = new image(); eye.src = "eye.png"; eye.onload = function() { ctx.drawimage(eye, x, y); }; window.onmousemove = handlemousemove; function draw(radianangle) { var newx = x + math.cos(radianangle) * offset; var newy = y + math.sin(radianangle) * offset; ctx.clearrect(0, 0, ctx.canvas.width, ctx.canvas.height); ctx.drawimage(robot, 0, 0); ctx.drawimage(eye, newx, newy); } function handlemousemove(e) { e.preventdefault(); mousex = parseint(e.clientx); mousey = parseint(e.clienty); var dx = mousex - eyex; var dy = mousey - eyey; draw(math.atan2(dy, dx)); }

you're on right track using math.atan2.

here's illustration , demo:

class="snippet-code-js lang-js prettyprint-override">var canvas = document.getelementbyid("canvas"); var ctx = canvas.getcontext("2d"); var $canvas = $("#canvas"); var canvasoffset = $canvas.offset(); var offsetx = canvasoffset.left; var offsety = canvasoffset.top; var pi2 = math.pi * 2; var cx = 150; var cy = 150; var radius = 50; var strokewidth = 5; var thumbangle = pi2 / 10; draw(pi2 / 10); $("#canvas").mousemove(function(e) { handlemousemove(e); }); function draw(radianangle) { // clear ctx.clearrect(0, 0, canvas.width, canvas.height); // circle ctx.beginpath(); ctx.arc(cx, cy, radius, 0, pi2); ctx.strokestyle = "black"; ctx.linewidth = strokewidth; ctx.stroke(); // indicator ctx.beginpath(); ctx.arc(cx, cy, radius - 25, radianangle - thumbangle / 2, radianangle + thumbangle / 2); ctx.strokestyle = "blue"; ctx.linewidth = strokewidth + 15; ctx.stroke(); } function handlemousemove(e) { e.preventdefault(); mousex = parseint(e.clientx - offsetx); mousey = parseint(e.clienty - offsety); var dx = mousex - cx; var dy = mousey - cy; draw(math.atan2(mousey - cy, mousex - cx)); } class="snippet-code-css lang-css prettyprint-override">body { background-color: ivory; } #canvas { border: 1px solid red; } class="snippet-code-html lang-html prettyprint-override"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <h4>move mouse. iris follow.</h4> <canvas id="canvas" width=300 height=300></canvas>

javascript animation canvas