Manual

This is the complete reference for tack. — what every tool does, every shortcut, and every export format. It assumes you can read JSON and use a keyboard. No prior experience with vector editors or image map tools is required.

If you just want to start using it, read Quick start and stop. Come back when you hit something specific.

Quick start

1. Load an image. Click the image icon, drag-and-drop a file onto the canvas, or use the Load Image button. PNG, JPG, GIF, and WEBP all work. Your image stays in the browser — nothing is uploaded.
2. Drop points. Click anywhere on the canvas to add an anchor. Click again to add another. Each anchor connects to the previous one with a straight segment.
3. Export. Open the Output panel, choose JSON, YAML, or HTML image map, and either copy or download the result.

That’s the whole loop. Everything else in this manual is refinement.

Concepts

A few terms recur throughout this document. They are precise, not casual.

• Shape — a sequence of one or more anchors. May be open (a polyline) or closed (a polygon).
• Anchor — a point on a shape. An anchor is either a corner anchor (the path bends sharply through it) or a smooth anchor (the path curves through it via bezier handles).
• Handle — the control point of a smooth anchor’s bezier curve. Each smooth anchor has two handles, one for each adjacent segment.
• Segment — the line or curve between two adjacent anchors. A segment is straight if both ends are corner anchors; otherwise it curves.
• Active shape — the shape you are currently drawing or editing. New anchors are added to the active shape. Only one shape is active at a time.
• Selected anchor — an anchor highlighted by clicking. Keyboard commands like nudging, smooth/corner toggle, and delete operate on the selection.

Drawing

Tools

The toolbar on the left has three tools. Switch between them with the keyboard or by clicking the icon.

Polygon is the default tool and the one you will use most. Rectangle and Ellipse are shortcuts for two common shapes — both produce ordinary editable shapes once drawn, so a rectangle is just a polygon with four corner anchors, and an ellipse is a closed shape with four smooth anchors.

The tool stays selected until you switch it. Drawing one rectangle does not pop you back into polygon mode.

Polygon tool

With the Polygon tool active:

• Click empty canvas — adds a corner anchor to the active shape.
• Click on an existing segment — inserts a new anchor on that segment without disturbing the rest of the shape.
• Click+drag empty canvas — adds a smooth anchor and lets you set its bezier handles in the same gesture. See Bezier curves.
• Press N — finishes the current shape and begins a new one. The current shape becomes inactive but stays on the canvas.
• Press C — closes the active shape, drawing a final segment from the last anchor to the first. The shape becomes a polygon.

Rectangle tool

With the Rectangle tool active:

• Drag on empty canvas — defines the rectangle by its opposite corners. Release to commit.
• Hold Shift while dragging — constrains the rectangle to a square.
• Hold Alt while dragging — draws from the center outward instead of corner-to-corner.
• Hold Shift+Alt — square, drawn from center.

The result is a closed shape with four corner anchors. You can edit it like any other polygon afterward — drag corners, insert anchors on edges, convert corners to smooth, and so on.

Ellipse tool

With the Ellipse tool active:

• Drag on empty canvas — defines the ellipse by the bounding box of opposite corners.
• Hold Shift while dragging — constrains to a circle.
• Hold Alt while dragging — draws from the center outward.
• Hold Shift+Alt — circle, drawn from center.

The result is a closed shape with four smooth anchors at top, right, bottom, and left, with bezier handles set to approximate a true ellipse. Because it’s just a smooth-anchor polygon, you can drag the handles afterward to deform it.

Bezier curves

Curves come from smooth anchors. There are three ways to create one:

• Click+drag on empty canvas with the Polygon tool. The drag distance and direction set the outgoing handle; the incoming handle is set symmetrically.
• Alt+drag a corner anchor. This pulls handles out of an existing corner, converting it to smooth in place.
• Double-click an anchor, or select it and press S. Toggles between corner and smooth.

Once handles exist, you can adjust the curve:

Symmetric handles produce smooth, continuous curves. Asymmetric handles produce sharp curvature changes (“cusps”) while still avoiding a hard corner.

Smooth and corner anchors

The two anchor types are the basic vocabulary of every shape.

• Corner anchors have no handles. Segments meet at a hard angle. Use these for rectangles, polygons with straight edges, and any sharp turn.
• Smooth anchors have two handles. Segments flow through them as a curve. Use these for ellipses, organic shapes, and traced silhouettes.

Toggling between them is non-destructive in one direction (corner → smooth adds default handles) and lossy in the other (smooth → corner discards the handles). Undo recovers either way.

Editing

All editing applies to existing shapes regardless of which tool drew them.

Selecting and moving

• Click an anchor to select it.
• Drag an anchor to move it.
• Shift+drag an anchor to move the entire shape it belongs to.
• Esc clears the current selection and cancels any in-progress pick (such as a custom origin).

Inserting and deleting anchors

• Click on a segment to insert a new anchor at that point. The segment splits in two; the shape’s overall path doesn’t change.
• Alt+click an anchor to delete it. Adjacent anchors reconnect.
• Del or Backspace — smart delete. Deletes the selected anchor if one is selected; otherwise deletes the active shape.

Nudging with arrow keys

With an anchor selected:

• Arrow keys move the anchor by 1 pixel in the corresponding direction.
• Shift+arrow moves it by 10 pixels.

Nudging respects the current coordinate system but always moves in screen-space pixels regardless of the export units.

Undo and redo

• ⌘Z (Ctrl+Z on Windows/Linux) — undo.
• ⌘⇧Z (Ctrl+Shift+Z) — redo.

History holds 100 steps. Loading a new image clears history.

Navigating the canvas

Pan and zoom are independent of the drawing tools, so you can use them mid-drag.

The status bar shows the current cursor position (XY), the angle of the segment under construction (ANG), the zoom level (ZOOM), and the loaded image (IMG).

Coordinate system

This is the part that matters most for downstream code. tack. lets you change three things independently: where (0, 0) lives, which way Y points, and whether values are pixels or normalized to 0–1.

Origin

The origin is the (0, 0) reference point. Pick the preset that matches your target system:

• TL — top-left. The default. Matches HTML, canvas, most game engines.
• TR — top-right. Rare; useful for right-anchored UI layouts.
• BL — bottom-left. Math convention; matches OpenGL, physics engines, many simulation tools.
• BR — bottom-right.
• C — center. Useful for symmetric layouts and shaders.
• ⌖ (custom) — click anywhere on the image to place the origin at that exact pixel. Useful when your asset has a known anchor point (e.g. a sprite’s pivot).

Changing the origin re-projects all coordinates immediately. The shapes don’t move on screen; only the numbers in the export change.

Y-axis direction

• ↓ — Y increases downward. Screen-space convention.
• ↑ — Y increases upward. Math/physics convention.

Set this to match the consumer of the data, not your visual intuition.

Pixels vs normalized

• PX — coordinates are absolute pixels in the image’s native resolution.
• 0–1 — coordinates are normalized: 0 is one edge of the image, 1 is the other.

Normalized output is resolution-independent. The same coordinates work whether the image is 512×512 or 4K, which is useful for ML datasets and any system that may resample the source.

Worked examples

Exporting

Open the Output panel and pick a format. Each format updates live as you draw, so you can keep it open as a reference while you work. Use Copy to put the result on the clipboard, or Download to save a file.

JSON

JSON is the format most game engines and dataset tools consume directly.

{
  "image": { "width": 1920, "height": 1080 },
  "origin": "TL",
  "yAxis": "down",
  "units": "px",
  "shapes": [
    {
      "id": "shape_1",
      "type": "polygon",
      "closed": true,
      "anchors": [
        { "x": 240, "y": 180, "type": "corner" },
        { "x": 640, "y": 180, "type": "corner" },
        { "x": 640, "y": 420, "type": "corner" },
        { "x": 240, "y": 420, "type": "corner" }
      ]
    }
  ]
}

Smooth anchors include their handles:

{
  "x": 100, "y": 200, "type": "smooth",
  "handleIn":  { "x": 80,  "y": 200 },
  "handleOut": { "x": 120, "y": 200 }
}

Consuming the JSON is a one-liner in most languages:

const data = await fetch('/shapes.json').then(r => r.json());
data.shapes.forEach(shape => {
  // draw shape.anchors however your engine wants
});

YAML

YAML carries the same data structure as JSON. Use it when your project’s config files or data assets are already YAML — for example, Ruby/Rails apps, many static site generators, and game engines like Defold.

image:
  width: 1920
  height: 1080
origin: TL
yAxis: down
units: px
shapes:
  - id: shape_1
    type: polygon
    closed: true
    anchors:
      - { x: 240, y: 180, type: corner }
      - { x: 640, y: 180, type: corner }
      - { x: 640, y: 420, type: corner }
      - { x: 240, y: 420, type: corner }

HTML image map

For embedding directly in a web page. tack. emits a standard W3C <map> element.

<img src="diagram.png" usemap="#tack-map" alt="Diagram">

<map name="tack-map">
  <area shape="poly"
        coords="240,180,640,180,640,420,240,420"
        href="#region-1"
        alt="Region 1">
</map>

Rectangles export as shape="rect" with two coordinate pairs. Closed polygons export as shape="poly". Smooth shapes are flattened to a polygon approximation when exporting to image map, since <area> does not support curves — keep that in mind if precision matters and use SVG or canvas with the JSON output instead.

Image map export uses the TL / Y-down / PX coordinate system regardless of the global origin setting, because that’s what HTML requires.

Round-trip editing

Existing JSON can be loaded back into tack. and edited.

1. Click Load Data and pick a file (or paste JSON into the import dialog).
2. The shapes appear on whichever image is currently loaded. Load the matching image before loading the data to keep coordinates aligned.
3. Edit normally. Re-export when done.

YAML round-trip is supported the same way. HTML image maps cannot be re-imported (they’re a one-way export).

This is the recommended workflow for projects under version control: commit the JSON, edit it through tack. when you need to, and re-commit the updated JSON.

Offline use and PWA install

tack. is a Progressive Web App. Once you’ve visited it once, it works without a network connection.

• Desktop (Chrome / Edge / Brave): click the install icon in the address bar, or open the browser menu and choose Install tack.
• iPad (Safari): tap the share icon, then Add to Home Screen.
• Android (Chrome): menu → Install app, or Add to Home screen.

The installed app launches in its own window with no browser chrome and works offline indefinitely. Your data still never leaves the device.

Keyboard shortcut reference

Tools

Drawing

Editing

View

General

On Windows and Linux, use Ctrl wherever you see ⌘.

Tips and gotchas

• My Y values look upside-down. You’re probably exporting with Y-axis ↓ but consuming in a system that expects ↑ (or vice versa). Flip the Y-axis toggle and re-export.
• My coordinates don’t match my image at runtime. Check that the image you’re rendering with is the same resolution as the one you traced on. If it’s resampled, switch to 0–1 normalized output and the coordinates will scale automatically.
• The HTML image map looks slightly off on curved shapes. <area> only supports straight polygons; tack. flattens curves into many short segments. Increase the precision of the flattening (or use an SVG overlay built from the JSON) if you need exact curves.
• Holding C doesn’t draw a circle. C closes the polygon. The Ellipse tool is E.
• I want to draw a perfect circle. Press E for the Ellipse tool, then hold Shift while dragging.
• I deleted the wrong thing. ⌘Z. History is 100 steps deep.
• My shapes disappeared when I loaded a new image. Loading a new image resets the canvas. Export your data first.
• Can I move a finished shape to a new image? Export the JSON, load the new image, then load the JSON back in. Coordinates stay in image-space, so the shape lands in the same pixel position on the new image.