Question

This is all about mathematics. It’s a shame that I’v forgotten those I learned in scool.

OK, I’m trying to get the image dimension after rotation (using canvas) with a certain angle in Javascript.

Answer 1

Since I don’t have any tools other than MSPaint here, I’ll re-use your image:

Say your original rectangle’s size is R(ectangle)W(idth) * RH(eight),

in this case RW=200, RH=80;

After rotating a certain angle A, counterclockwise,

where 0deg <= A <= 90deg in degrees (or 0 <= A <= Math.PI/2 in radians),

in this case A=30deg or A=Math.PI/6,

In the new “outer” rectangle, each side is divided by two parts (for the convenience of describing; corresponding to the image).

On the left side, let’s say the upper (purple) part is called N(ew)H(eight)U(p), and the lower (red) part is called NHL(ow);

Same rule on the bottom side, we have NW(idth)L(eft) (blue) and NWR(ight) (orange).

So the size (area) of new rectangle would be (NHU + NHL) * (NWL + NWR)

According to the definition of sin and cos:

NWL = RW * Math.cos(A); //where A is in radians
NHL = RW * Math.sin(A);

NHU = RH * Math.cos(A);
NWR = RH * Math.sin(A);

(if you’re using A in degrees, replace A to Math.PI*A/180).

So the new “outer” width would be NWL + NWR, and new “outer” height would be NHU + NHL, and now you can calculate everything.