Detect if rotated rectangle is in canvas arc

Question

I have a rectangle I've rotated via ctx.rotate and an arc. I want to check to see if any part of the rectangle is inside said arc. For instance, this should be true:

I've tried to use isPointInPath but the "point" I'm looking for is not the actual coordinates of the rectangle, but the non-rotated ones (Actual is green, isPointInPath is checking against blue):

Here's the JS:

var canvas = document.querySelector('#canvas'),
    height = canvas.height = canvas.clientHeight,
    width = canvas.width = canvas.clientWidth,
    ctx = canvas.getContext('2d');
canvas.width = canvas.height = 512;

var shipx = 400,
    shipy = 256;

function moveShip() {
    ctx.fillStyle = '#000';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    ctx.save();
    ctx.translate(shipx, shipy);
    ctx.rotate(3.66);
    ctx.fillStyle = 'green';
    ctx.fillRect(0, 0, 80, 20);
    ctx.restore();

    // This is what isPointInPath is seeing
    ctx.fillStyle = 'rgba(0,0,255,0.5)';
    ctx.fillRect(shipx, shipy, 80, 20);

    ctx.fillStyle = 'rgba(255,0,0,0.5)';
    ctx.beginPath();
    ctx.moveTo(256, 256);
    ctx.arc(256, 256, 100, -20 * Math.PI / 180, 90 * Math.PI / 180);
    ctx.lineTo(256, 256);

    if (ctx.isPointInPath(shipx, shipy) || ctx.isPointInPath(shipx + 20, shipy + 20)) {
        // This *should* trigger
        ctx.fillStyle = 'rgba(0,0,255,0.5)';
    };

    ctx.fill();
}

moveShip();

JSBin for live code fun

Answer 1

You can simply use coordinate rotation to align the rectangle with the system, then just use one of the many axis-aligned algos for your case:

var dx = arc.x - ship.x,
    dy = arc.y - ship.y;

ctx.rotate( -ship.rot );

ctx.beginPath();
ctx.moveTo( 0, 0 );
ctx.arc( 0, 0, arc.r, arc.sRot, arc.eRot );

if( ctx.isPointInPath( dx, dy ) ||
    ctx.isPointInPath( dx + rect.w, dy ) ||
    ctx.isPointInPath( dx, dy + rect.h ) ||
    ctx.isPointInPath( dx + rect.w, dy + rect.h ) )

    collisionIsTrue();