Rotate and crop image in Canvas?

Question

JavaScript

Hello. Tell me please. How can I rotate and crop an image on Canvas so that it fills the entire area

Here is how in the example the lower and right areas did not fill from the photo

Thank you.

Answer 1

remember the school geometry course?
display a larger image so that it is enough for the cut out areas. by multiplying the original size according to the inscribed square formula by the root of two :)
https://codepen.io/anon/pen/NoNpzZ
and you can also calculate the minimum size and offset for each corner, but this is already a problem with an asterisk.