I am trying to make a thing that clips images like the css clip-path but with a canvas. I have a 3d mapbox map where I want to put this image, as a texture for a plane in three js, but first I have to clip it. I have an image that has a defined geojson shape, the topleft of the image on the map, the NE and the SW. The SE corner was calculated and then a polygon was shaped, ImageShape in the jsfiddle. Same for the building the buildingShape, and then I found out where they intersected with turf and got intersectPoly.

I have made one try at doing this, and it works somewhat. If the image is not rotated it works perfectly, but when the image is rotated on the map, it does not work and I can't figure out why, anyone who has any idea or any way to solve this, please help!

https://jsfiddle.net/ha15e2cy/

const pixelPerLon = canvas.width / Math.abs(topleftOfImage[1] - NEOfImage[1]);
const pixelPerLat = canvas.height / Math.abs(topleftOfImage[0] - SWOfImage[0]);

for (let i = 0; i < (intersect.geometry.coordinates[0].length - 1); i++) {
    const coords: any = intersect.geometry.coordinates[0][i];
    const xlength = Math.abs(topleftOfImage[0] - coords[0]);
    const ylength = Math.abs(topleftOfImage[1] - coords[1]);
    r.lineTo(xlength * pixelPerLon, ylength * pixelPerLat);
}

Any help appreciated!