Build a canvas-based product designer and there is a mistake waiting for you about three days in. You have a working editor. The customer’s artwork sits on a photograph of a t-shirt. You wire up an export button, call the canvas library’s toDataURL(), and send the result to the printer.
The printer prints the t-shirt. The photograph of the t-shirt, onto the t-shirt.
Two renders, never one
The fix is not a flag on the export. It is accepting that one design produces two genuinely different images, and that they are needed in different places.
- The preview keeps the mockup, because its whole job is to show the design on the product. It goes in the cart, at checkout, on the order and in the confirmation email.
- The print file drops the mockup entirely. It is the artwork alone, on transparency, cropped to the printable area. It goes to the press.
In DesignCrate these are produced by the same code path with the background image nulled out and a crop applied, which keeps them honest: the print file is definitionally the preview minus the product.
Screen pixels are not a unit
The second mistake is subtler. A canvas is some number of CSS pixels wide — 389, say, because that is what fitted the column on that particular screen. Export at that size and you have a 389 pixel image of something that needs to be printed twelve inches across.
So the printable area is never stored in screen pixels. It is stored as a physical size and a resolution:
print width: 12
print height: 16
unit: inches
resolution: 300 DPI
→ exported file: 3600 × 4800 pxThe canvas size is then derived for display and thrown away. The export multiplier is whatever gets the printable region from its on-screen size up to its real one. Resize the browser and the number changes; the output does not.
A useful test: if changing the width of the browser window changes the file your printer receives, something upstream is storing the wrong thing.
The print area has to keep its shape
One more trap. If the store owner can drag the printable region to any shape they like, they will eventually draw a square one on a product declared as 12 × 16 inches. The export then has to either stretch the artwork or crop it, and both are wrong.
So the region is locked to the aspect ratio of the print size. You can move it and resize it freely, but you cannot position your way into a file that comes out the wrong shape. It is a small constraint that removes an entire category of support ticket.
And the artwork has to stay inside it
Finally, every layer the customer adds is clamped to the printable region rather than to the canvas. The distinction matters: the canvas is the whole product photograph, and a design that is inside the canvas but outside the print area looks perfectly fine on screen and arrives at the printer with its edges missing.