The PenPrint canvas is your primary drawing surface. Every mark you place on it maps directly to physical print dimensions — the square canvas represents exactly 100mm×100mm of pen-plotter output. Understanding how the canvas works helps you compose artwork that prints exactly as you intend.Documentation Index
Fetch the complete documentation index at: https://mintlify.com/howtodo1/printer-web/llms.txt
Use this file to discover all available pages before exploring further.
Canvas overview
PenPrint renders the canvas using Fabric.js under the hood. The canvas element carries the iddanda and is sized at 400×400 px on desktop and 360×360 px on mobile. Both sizes represent the same 100mm×100mm coordinate space, so your design scales correctly regardless of the screen you work on.
All object coordinates are expressed in canvas pixels. Because the canvas always maps to 100mm×100mm in print, 1 canvas pixel corresponds to 0.25mm (desktop) or roughly 0.278mm (mobile). Position objects with this ratio in mind when precise placement matters.
Selecting objects
Click any object on the canvas to select it. When an object is selected, Fabric.js renders its bounding box and a set of transform handles around it. The Object Properties panel on the right updates to show controls specific to that object’s type. To deselect, click on an empty area of the canvas. The Object Properties panel clears when no object is selected.PenPrint operates in single-selection mode — only one object can be active at a time.
Moving, scaling, and rotating objects
Fabric.js provides built-in transform controls on every selected object. You do not need to switch tools; the handles are always present when an object is selected.Moving an object
Moving an object
Click and drag anywhere inside the object’s bounding box to reposition it. The object moves freely across the canvas. Release the mouse button to set the new position.
Scaling an object
Scaling an object
Drag any of the four corner handles to scale the object. Dragging a corner handle scales both axes simultaneously. Dragging a mid-edge handle scales only the corresponding axis.
Rotating an object
Rotating an object
A circular rotation handle appears above the top edge of the bounding box. Click and drag that handle to rotate the object around its center point.
How canvas coordinates map to print dimensions
The canvas always represents a 100mm×100mm area regardless of the pixel dimensions shown on screen.| Screen size | Canvas pixels | Physical output |
|---|---|---|
| Desktop | 400×400 px | 100mm×100mm |
| Mobile | 360×360 px | 100mm×100mm |
Sharing your design via URL
PenPrint supports loading a design from a URL. When the app starts, it checks for a?svgB64= query parameter. If present, PenPrint decodes the Base64 payload, parses the embedded SVG, and places all objects onto the canvas automatically.
To share a design, you export the canvas SVG, encode it as base64url, and append it to the PenPrint URL:
- instead of + and _ instead of /, with padding stripped — the app decodes this on startup using fromBase64Url().
Anyone who opens the URL sees your design pre-loaded on their canvas, ready to preview or export.
Related pages
Adding and editing text
Learn how to create and style text objects on the canvas.
Using icons and SVGs
Browse the icon library and upload custom SVG artwork.
Preview, export, and share
Preview pen strokes, download GCODE, and send your artwork for printing.