Accessible Image Placement Canvas

Place one or more images on a custom canvas for printing, presentations, or social media posts. Choose a canvas size and background, adjust each image's size, orientation, and position, then export a PNG. The app provides keyboard-accessible controls, a visual preview, and text feedback for placement, cropping, and overlap. Uploaded images stay in your browser, and exported PNG files are generated locally on your device.

Instructions

Use Accessible Image Placement Canvas when you want to place one or more images on a canvas for printing, presentations, or social media posts, then export the result as a PNG.

You can type directly into editable fields when you need a specific value. For canvas width and height, scale percentage, and nudge movement, entering your own value switches that setting to Custom.

Open Preferences first if you want to change how the app measures, names, or places images. Choose your measurement unit, export DPI, and the canvas corner used for X and Y positions. The Measure position from setting controls where X and Y measurements start. For example, Top-left corner means X is measured from the left edge of the canvas and Y is measured from the top edge.

Preferences also includes options for cropped export, filename verbosity, placement after upload, nudge movement, and Text Summary order. Hide filename extensions is on by default, so a file named portrait.png is shown as portrait. If two images would have the same displayed name, the app adds numbers such as portrait 1 and portrait 2.

To use the main workflow:

  1. Select a canvas size. You can choose a preset or enter a custom width and height.
  2. Select a background color. Transparent is the default.
  3. Upload an image. The uploaded image becomes the selected image and is positioned in the center by default. You can change the default placement in Preferences. If you upload more images, use the image selector in the positioning step or press 1 through 0 on the number row to choose images 1 through 10.
  4. Orient and resize the selected image. Use Fit entire image inside canvas to resize the selected image so all edges fit within the canvas using the current orientation. Use Best fit without cropping when you want the app to choose the better orientation and resize the image for you. If you use Best fit, you usually do not need to adjust orientation or scaling afterward. If you want more control, choose the orientation yourself, then choose a scale. Scaling changes how large the selected image appears on the canvas: 100 percent keeps the original imported size, smaller percentages reduce it, larger percentages enlarge it, and Custom scale lets you type your own value.
  5. Position the selected image. Use the X and Y fields, quick placement buttons, center buttons, nudge buttons, or keyboard canvas shortcuts. Quick placement buttons place the selected image at positions such as upper left, center, or lower right.
  6. Export the PNG when the canvas and image placement are ready.

Using Canvas Preview

Canvas Preview shows the canvas and all uploaded images. Fit Preview is selected by default so you can see the complete canvas.

Use Zoom in for a closer look, Zoom out to reduce the magnification, 100% to show the canvas at its full generated size, or Fit Preview to return to the complete canvas. Zooming changes only the preview. It does not change the canvas, image placement, or exported PNG.

When zooming makes the canvas larger than the preview area, only part of the canvas is visible at one time. Use the Scroll preview buttons or Control plus Arrow in the Keyboard canvas area to view another part of the canvas without moving the selected image.

  • Control plus Left moves the view left.
  • Control plus Right moves the view right.
  • Control plus Up moves the view up.
  • Control plus Down moves the view down.

Imagine dividing the visible preview area into four equal sections. Pressing Control plus Right moves the view to the right by the width of one section. Control plus Left works the same way toward the left. Control plus Up and Control plus Down move by one quarter of the visible height.

The movement is based on the size of the preview area, not the zoom percentage. At a higher zoom level, the same movement covers a smaller portion of the complete canvas because the enlarged canvas takes up more space.

Zoom percentage describes how large the canvas appears. The visible-canvas percentage describes approximately how much of the complete canvas you can currently see. After zooming or moving the view, the app announces the visible percentage and general area, for example, “42% of the canvas is visible. Viewing the upper-right area.”

When you move or select an image while zoomed in, the preview follows the selected image when necessary so its outline remains visible. This changes only the view, not the image's position.

Use Preview Description or press Shift plus P in the Keyboard canvas area for a short overview of the preview, images, cropping concerns, and overlaps. Use Text Summary for complete details.

The app gives feedback while you work. For example, after moving an image it can report the current position, whether the image would be cropped, and whether it overlaps another image. If cropped export is off and any image would be cropped, Export PNG is disabled and the app identifies the image that needs attention. If cropped export is on, warnings still appear, but export remains available.

When images overlap, feedback is given from the selected image's point of view. If several overlaps exist, immediate feedback prioritizes an image above the selected image. Text Summary gives fuller overlap details, with each overlap listed as its own nested bullet.

Examples of overlap feedback:

  • The right side of Portrait overlaps the left side of Logo by 0.5 in.
    • Portrait is the selected image.
    • The right side of Portrait is touching Logo.
    • The overlap goes 0.5 in into Logo from Logo's left side.
  • The right side of Portrait is overlapped by the left side of Logo by 0.5 in.
    • Portrait is the selected image.
    • Logo is above Portrait and covers part of Portrait.
    • The covered area goes 0.5 in into Portrait from Portrait's right side.
  • The bottom-right corner of Portrait overlaps the top-left corner of Logo. The overlap reaches 0.5 in from the top and 0.3 in from the left of Logo.
    • Portrait is the selected image.
    • The overlapping area is at a corner, not only one side.
    • The overlap reaches 0.5 in down from Logo's top edge and 0.3 in in from Logo's left edge.

Use Text Summary as a nonvisual review of the canvas. It lists canvas information and a separate summary for each image, including stack order, displayed size, orientation, position, crop status, and overlap status.

Tips
  • Start with Preferences if you want to change measurement units, default placement, cropped export, filename display, or other app defaults before you begin.
  • Start with a tightly cropped image when possible. Extra empty space around the artwork can affect centering because the app positions the full image file, not only the visible subject.
  • Type directly into editable fields when you need a specific value. Fields that support presets switch to Custom when edited.
  • Use Text Summary as a nonvisual check of the canvas. It reports each image's size, position, crop status, stack order, and overlap status.
  • Use an AI tool or another review method to check the output before export.

Workflow

Preferences

Choose the unit you want to use for measurements. Millimetres and inches describe print size. Pixels are converted using the selected DPI.

DPI affects the exported PNG pixel size and metadata. It does not change the canvas size shown in your selected measurement unit.

On by default. When turned off, position, crop, and overlap announcements use measurement values without saying the unit.

Position announcement

Changed coordinate only reads just the value that changed. X then Y reads both values in the usual order. Changed coordinate first reads both values, with the changed value first.

Measure position from

Choose which canvas corner the X and Y position fields use as their starting point. For example, Top-left means X is measured from the left edge and Y is measured from the top edge.

Placement after upload

Applies to newly uploaded images. Replacing an image keeps its current placement when possible.

Off by default. Warnings still appear when cropping would occur, but export remains available when this is turned on.

On by default. Shortens displayed image names, so portrait.png is shown as portrait.

Text Summary image order

Changes only the order that images are listed in Text Summary. It does not change the visual layer order or export order.

1: Select Canvas Size

Choose a design canvas or enter a custom size.

2: Select Background Color

Background color

3: Upload Image

Supported formats: PNG, JPG, JPEG, WebP, and SVG. PNG, JPEG, and WebP files can be up to 50 MB. SVG files can be up to 5 MB. Images with unusually large dimensions may also be rejected to keep the app responsive.

4: Orient and Resize

Applies to the selected image only. Resizes the image so all edges stay within the canvas, using the current orientation.

Applies to the selected image only. Automatically chooses the better orientation, then resizes the image so the entire image stays inside the canvas.

Image orientation
Image scale

Selecting a scale preset updates this value. Editing this value switches scaling to Custom scale.

5: Position Image

Keyboard canvas area

Arrow keys move the selected image. Shift plus arrow keys move by a larger amount. Control plus arrow keys move the preview by one quarter of the visible area without moving the image. Press plus or equals to zoom in, minus to zoom out, or F to fit the canvas. Press P for position, crop, and overlap details, or Shift plus P for the Preview Description. Press 1 through 0 on the number row to select images 1 through 10. Press Q W E, A S D, Z X C, or Numpad 1 through 9 for quick placement; Num Lock may need to be on. Press H to center horizontally, V to center vertically, or Escape to leave this area.

6: Export PNG