Collision detection between rotated images

See more:

Javascript

Canvas

I have two Rotated images that rotate at a random degree and I want to know when they collide with each other. I tried a simple collision detection for rectangles but it doesn't work when they are rotated. I would really appreciate some help.

What I have tried:

// take two images and check if they overlap
function rectIntersect(x1, y1, w1, h1, x2, y2, w2, h2) {
// Check x and y for overlap
if (x2 > w1 + x1 || x1 > w2 + x2 || y2 > h1 + y1 || y1 > h2 + y2) {
return false;
}
return true;
}