Image to Canvas

Live

Turn a game UI image into movable parts and editable text. Edit on the canvas, or use the API and MCP.

$0.49 per image$0.49 per import. Editing and exports are free. Failed imports are refunded. Files are kept for 7 days.

Turn your image into a canvas

Separate a game UI image into movable parts and editable text. Try the example below for free, or import your own image.

Image URLUpload image

$0.49 per import. Editing and exports are free. Failed imports are refunded. Files are kept for 7 days.

Your canvas

Select a layer or double-click text. Drag to move, use corner handles to resize, and undo any edit.

Open canvas JSON

How it works

01Upload an imageUse a PNG, JPEG or WebP image up to 10 MB and 25 megapixels.
02Create an editable canvasGet separate image layers and text. Select, move, resize, restyle and reorder the parts.
03Save and reuseExport PNG, portable canvas JSON or individual components. AI agents can use the same canvas through REST and MCP.

Call Image to Canvas from your code

Turn a game UI image into movable parts and editable text. Edit on the canvas, or use the API and MCP.

POSThttps://api.opennan.com/v1/images/canvas

GET/v1/canvas/{task_id}
POST/v1/canvas/{task_id}/edit
GET/v1/canvas/{task_id}/export

Get an API key
Create a key in the console. It uses the same balance as the playground.
Create a key

Send your first request

The same request the playground sends. Set OPENNAN_KEY to your key.

curl https://api.opennan.com/v1/images/canvas \
  -H "Authorization: Bearer $OPENNAN_KEY" \
  -H "Content-Type: application/json" \
  -d '{"image_url":"https://cdn.opennan.com/examples/image-to-canvas/2026-11-13/game-ui-74844a91c33f/source.webp","max_cost_usd":0.49}'

# Then poll until "status" is "succeeded" or "failed":
curl https://api.opennan.com/v1/canvas/<task id> -H "Authorization: Bearer $OPENNAN_KEY"

Poll the task
The call answers right away with a task id. Ask for the task until it finishes:
GEThttps://api.opennan.com/v1/canvas/{id}
queued
Waiting for a worker
running
Being made
succeeded
Done: outputs[].url holds the files
failed
Failed: you are not charged

Errors and how to fix them

401Missing or wrong key
Send the header Authorization: Bearer with a key from the console.
402Balance too low
Add credit in Billing, then send the same call again.
400A value is not accepted
Read error.message: it names the field. Use a value from the parameter table.
429Too many requests
Wait a few seconds and try again, waiting longer after each 429.

MCPhttps://api.opennan.com/v1/canvas/mcp

This tool from your AI

Once Opennan is added, your AI calls this tool with arguments like these.

Tool: layer_design
Example arguments: { "action": "import", "image_url": "https://cdn.opennan.com/examples/image-to-canvas/2026-11-13/game-ui-74844a91c33f/source.webp", "max_cost_usd": 0.49 }

Image to Canvas: questions

Can an AI agent edit the canvas?

Yes. Use layer_design through the canvas MCP endpoint to import, read, edit and export. Imports cost money; read, edit and export are free. Read the current revision before editing to avoid overwriting another change.