is there any way i can make the edges of the image stretchable such that the entire image does not get resized when the image is stretched from one corner.
I want the user to adjust the image such that when the middle of the edge of the image is clicked and dragged , the size should increase (horizontally or vertically, depending on the edge) which is currently happening. But when the corner is clicked and dragged, currently the entire size of the image is increasing proportionately , i want that when a corner is clicked and dragged, the image should be stretched from the corner only.
ultimately, i want a poster to fit in a banner which is tilted.

I tried
let image = new fabric.Image(imageElement, {
left: 50,
top: 50,
scaleX: 0.5,
scaleY: 0.5,
skewX: -8,
angle: -4,
lockUniScaling: false, // Allow non-proportional scaling
lockScalingFlip: false, // Allow flipping during scaling
scaleUniformly: false, // Ensure independent scaling for width and height
cornerSize: 10, // Size of control corners
cornerStyle: “circle”, // Style of corner controls
transparentCorners: false, // Make the corners visible for better control
hasControls: true, // Show the corner controls for scaling
});

But none of it seems to be working

example is below
Screenshot of the output