canvas - Rotating a rectangle based on Mouse X and Y position -

i've been working on , trying work pretty stumped.

i want rectangle follow mouse position , rotate correctly. it's following mouse angle rotate seems off. or guidance, i'm not sure doing wrong here.

here's code has angle in it:

function createboat() {     var angle = math.atan2(             boat.y - mousepos.y,             boat.x - mousepos.x         ) * 180 / math.pi;     ship_context.rotate(angle);     ship_context.fillrect(boat.x, boat.y, boat.width, boat.height); // create shape, there nothing on canvas yet } 

here's loop

function loop() {     ship_context.clearrect(0, 0, window.innerwidth, window.innerheight);     moveboat();     time = date.now();     createboat();      settimeout(loop, 1000/60); } 

here's demo: http://staging.interactivemechanics.com/chop/row3.html

---

also, sidenote, working basic shapes right now. plan translate images. rectangle boat , have separate page have leaves in pond moving. have part working collision detection too. want know if library better use here or if should stick canvas?

here's other demo: http://staging.interactivemechanics.com/chop/row2.html moving stuff

if want rotate boat, first need translate (let's call fixate) position of canvas, , rotate on point. in order avoid ship over-rotate, need reset rotation after we're done drawing ship

try this:

function createboat() {     var angle = math.atan2(             boat.y - mousepos.y,             boat.x - mousepos.x         ) * 180 / math.pi;     ship.context.save(); //save settings of canvas     ship_context.translate(boat.x+boat.width/2,boat.y+boat.height/2); //move focus boat position (middle of boat)     ship_context.rotate(angle);     ship_context.fillrect(-boat.width/2, -boat.height/2); // create shape, there nothing on canvas yet     ship_context.restore(); //putting in place }