E-Commerce Mockup Preview System

I want to add a lightweight, browser-based mockup/preview tool to my site so visitors can place their artwork on items such as T-shirts, hats, sweatshirts and aprons directly on the product page.

Flow:
• The visitor chooses a product and a predefined placement area (e.g., left chest/right chest/sleeve/back for T-shirts; front/side/back for hats; front for aprons).
• Their uploaded artwork is placed onto that zone automatically and rendered instantly.
• They can adjust it (move, scale, rotate) until it sits exactly where they want.
• The on-screen preview updates in real time.
• When they’re happy, they can download the result as an image (PNG/JPEG) and/or a PDF.

Everything must run inside the webpage (no heavy plug-ins). A JavaScript canvas approach (Fabric.js, Konva, etc.) is fine, but I’m open to other clean, fast solutions that work on modern desktop and mobile browsers.

Deliverables:
– A working front-end component with clean, maintainable code
– A simple way for me to add products and define placement areas (coordinates + size)
– Export that matches the user’s final positioning (image + PDF)
– A short setup guide for integrating it into my existing site

If you’ve built something similar, please share examples and your suggested approach/timeline.