Create Product Mockups Free Place your design on product mockups like t-shirts, mugs, and business cards.

The tool uses React to manage its state and handle user interactions. It employs the `useState` hook to store the uploaded image, selected product, product color, and scale value. The `useRef` hook is used to reference a canvas element, which is utilized by the Canvas API to composite the design onto the product surface. When a user uploads an image, it is converted to a URL object using `URL.createObjectURL`, and when the component unmounts, `URL.revokeObjectURL` is called to release the object.

The generate function uses the Canvas API's 2D drawing context to render the product template and design. It first fills the canvas with a light gray background color, then draws the product shape using methods like `fillRect`, `beginPath`, and `stroke`. For example, when rendering a t-shirt template, it creates a complex path to form the torso shape. The design image is then drawn within the designated design area bounds using `drawImage`, with its size scaled according to the user-selected scale value.

The tool also utilizes browser APIs like `document.createElement` and `URL.createObjectURL` to handle file downloads. When a user clicks the download button, it creates an anchor element, sets its `download` attribute to the product name and "mockup.png", and simulates a click event to initiate the download. The image data is obtained from the canvas element using `toDataURL`, which returns a PNG-formatted string representing the composite design.

In terms of data structures, the tool uses arrays to store product templates and colors. The `PRODUCTS` array contains objects with properties like name, color, and design area coordinates, while the `PRODUCT_COLORS` array stores predefined color values as strings. These data structures are used to populate the user interface with product options and color palettes. By leveraging these technologies and APIs, the tool provides a robust and efficient way to generate high-quality product mockups.