let designArea: fabric.Rect;

function addTShirtImage(url: string) {
fabric.Image.fromURL(url, (img) => {
const imgWidth = canvasWidth;
const imgHeight = canvasHeight;
img.set({
left: 0,
top: 0,
selectable: false,
hasControls: false,
evented: false,
});
canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));

designArea = new fabric.Rect({
left: canvasWidth * left,
top: canvasHeight * top,
width: canvasWidth * width,
height: canvasHeight * height,
fill: "transparent",
stroke: "#000000",
strokeDashArray: [1, 1],
selectable: false,
evented: false,
});

canvas.add(designArea);

const updateButtonPosition = () => {
if (buttonRef.current) {
buttonRef.current.style.left = ${designArea!.left! + designArea!.width! / 2 - buttonRef.current.offsetWidth / 2}px;
buttonRef.current.style.top = ${designArea!.top! + designArea!.height! / 2 - buttonRef.current.offsetHeight / 2}px;
}
};

updateButtonPosition();

window.addEventListener('resize', updateButtonPosition);
canvas.on('object:modified', updateButtonPosition);

saveState();
});
}