get correct coords of top-left corner after rotation

Question

I want to display on the top left corner of an object drawed on a canvas.

The left and top position of the delete button is equal to object.left + object.width and the top equal to object.top .

After I rotate the object the left and top of the delete button is equal to the original position of the object.

Can someone explain me how to get 'real' XY coords of top-right corner?

Here is my jsfiddle: http://jsfiddle.net/5KKQ2/304/

   delBtn.style.display = 'block';
    delBtn.style.left = activeEl.left + (activeEl.width * activeEl.scaleX / 2) - 25 + 'px';
    delBtn.style.top = activeEl.top - (activeEl.height * activeEl.scaleX / 2) - 15 + 'px';

Answer 1

A bit of trigonometry will give you the rotated top-left corner point

This assumes the rectangle is being rotated around its center point

function rotatedTopLeft(x,y,width,height,rotationAngle){

    // get the center of the rectangle (==rotation point)
    var cx=x+width/2;
    var cy=y+height/2;

    // calc the angle of the unrotated TL corner vs the center point
    var dx=x-cx;
    var dy=y-cy;
    var originalTopLeftAngle=Math.atan2(dy,dx);

    // Add the unrotatedTL + rotationAngle to get total rotation
    var rotatedTopLeftAngle=originalTopLeftAngle+rotationAngle;

    // calc the radius of the rectangle (==diagonalLength/2)
    var radius=Math.sqrt(width*width+height*height)/2;

    // calc the rotated top & left corner
    var rx=cx+radius*Math.cos(rotatedTopLeftAngle);
    var ry=cy+radius*Math.sin(rotatedTopLeftAngle);

    // return the results
    return({left:rx,top:ry});
}

Here's example code and a Demo:

 var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); var cw=canvas.width; var ch=canvas.height; var PI=Math.PI; var PI2=PI*2; var x=125; var y=132; var width=50; var height=36; var rotationAngle=PI/6; ctx.translate(x+width/2,y+height/2); ctx.rotate(rotationAngle); ctx.fillStyle='red'; ctx.strokeStyle='black'; ctx.lineWidth=5; ctx.fillRect(-width/2,-height/2,width,height); ctx.strokeRect(-width/2,-height/2,width,height); ctx.rotate(-rotationAngle); ctx.translate(-(x+width/2),-(y+height/2)); var rotatedTopLeft=rotatedTopLeft(x,y,width,height,rotationAngle); dot(rotatedTopLeft.left,rotatedTopLeft.top,5,'gold'); function rotatedTopLeft(x,y,width,height,rotationAngle){ // get the center of the rectangle (==rotation point) var cx=x+width/2; var cy=y+height/2; // calc the angle of the unrotated TL corner vs the center point var dx=x-cx; var dy=y-cy; var originalTopLeftAngle=Math.atan2(dy,dx); // Add the unrotatedTL + rotationAngle to get total rotation var rotatedTopLeftAngle=originalTopLeftAngle+rotationAngle; // calc the radius of the rectangle (==diagonalLength/2) var radius=Math.sqrt(width*width+height*height)/2; // calc the rotated top & left corner var rx=cx+radius*Math.cos(rotatedTopLeftAngle); var ry=cy+radius*Math.sin(rotatedTopLeftAngle); // return the results return({left:rx,top:ry}); } function dot(x,y,radius,fill){ ctx.beginPath(); ctx.arc(x,y,radius,0,PI2); ctx.closePath(); ctx.fillStyle=fill; ctx.fill(); } 

 body{ background-color: ivory; } #canvas{border:1px solid red;} 

 <h4>Gold dot is at the rotated top-left corner</h4> <canvas id="canvas" width=300 height=300></canvas>