What Is the Image Editor?
The GoToolly Image Editor is a full-featured browser-based image editing application. It uses a professional three-panel layout:
- Left Panel: Upload section and tool grid (select, crop, brush, shapes, text, and more)
- Center: Canvas preview with zoom, pan, undo/redo toolbar, and export bar
- Right Panel: Properties panel, editing history, and image information
Every tool and feature runs entirely in your browser using the HTML5 Canvas API. Your images are never uploaded to any server.
Getting Started
Step 1: Upload an Image
Click the upload area or drag and drop an image file onto it. Supported formats: JPG, PNG, WebP, GIF, BMP, and SVG. Maximum file size is 50 MB.
Once loaded, the image appears in the center preview canvas. The left panel shows available tools, and the right panel displays image info (file name, dimensions, size).
Step 2: Navigate the Canvas
Zoom: Use the +/- buttons in the toolbar, scroll with your mouse wheel, or press Ctrl++ / Ctrl+-. Click "Fit" to fit the image to the window.
Pan: Select the Move tool (H) or hold while clicking empty canvas space, then drag to pan around zoomed-in areas.
Step 3: Export Your Result
Click "Apply & Download" to open the export dialog. Choose the output format (PNG, JPEG, or WebP), adjust quality (for JPEG/WebP), set scale, and pick a filename. The download starts immediately.
Tools Overview
The tool grid in the left panel contains all editing tools. Click a tool to activate it. Some tools (rotate, flip, shape, brush) show a popup menu with options.
Select (V)
Click elements to select, drag to move, use handles to resize.
Move (H)
Pan the canvas when zoomed in.
Crop (R)
Drag handles to select an area, then apply the crop.
Rotate
Rotate 90° CW, 90° CCW, or 180°.
Flip
Flip horizontally or vertically.
Resize
Resize the canvas to custom dimensions with a background color.
Brush (B)
Freehand draw with adjustable color and size.
Pencil (P)
Pixel-art style freehand drawing (no anti-aliasing).
Eraser (E)
Erase parts of the image.
Highlight
Translucent marker with adjustable opacity.
Shape (S)
Draw rectangles, rounded rectangles, or ellipses.
Line (L)
Draw straight lines.
Arrow (A)
Draw arrows with arrowheads.
Text (T)
Click to add editable text. Double-click to edit inline.
Blur
Drag a rectangle to blur that area.
Pixelate
Drag a rectangle to pixelate that area.
Redact
Drag a rectangle to black out sensitive content.
Fill (G)
Click an area to flood-fill with the current brush color.
Picker (I)
Click any pixel to pick its color (sets brush color).
Working with Elements
When you add shapes, text, lines, or arrows, they become elements (layers) that you can select, move, resize, and style independently.
Selecting Elements
Use the Select tool (V) and click an element. Selected elements show blue resize handles. You can also click elements in the Elements panel on the left.
Moving and Resizing
Drag a selected element to move it. Drag the corner or edge handles to resize. While resizing, alignment snap guides appear to help you align with other elements or canvas edges.
Properties Panel
When an element is selected, the Properties panel on the right shows its adjustable settings:
- Position: X and Y coordinates
- Size: Width and height (line X2/Y2 for lines and arrows)
- Rotation: Rotate the element in degrees
- Opacity: Transparency from 0% to 100%
- Blend Mode: Choose from 16 compositing modes (multiply, screen, overlay, etc.)
- Fill/Stroke: Colors and border width (shapes)
- Font: Family, size, color, bold, italic, underline, alignment (text)
Tip: You can resize multiple elements at once by selecting a shape, changing its properties, then duplicating it with Ctrl+D. Each duplicate maintains the same style.
Elements Panel
The Elements panel in the left sidebar lists every element on the canvas. From this panel you can:
- Reorder: Drag an element up or down to change its stacking order
- Hide/Show: Click the eye icon to temporarily hide an element
- Lock/Unlock: Click the lock icon to prevent accidental moves or edits
- Delete: Click the trash icon or press Delete/Backspace
Editing Text
Double-click any text element to open the inline text editor. Type directly on the canvas, press Enter for new lines, or click outside to commit. Style options (font, size, color, bold, italic, alignment) are available in the Properties panel.
Image Adjustments
Crop
Click the Crop tool (R). A crop overlay appears on the canvas. Drag the corner and edge handles to adjust the crop area. You can also drag the interior of the crop box to reposition it. Click "Apply Crop" to confirm or "Cancel" to abort.
Rotate
Click the Rotate tool and choose 90° CW, 90° CCW, or 180°. The canvas automatically resizes to accommodate the new orientation.
Flip
Click the Flip tool and choose Horizontal or Vertical. The image mirrors along the selected axis.
Resize Canvas
Click the Resize tool. A dialog lets you enter custom width and height (up to 10,000 px) and choose a background color for any padding area. The original image is placed at the top-left corner of the new canvas.
Drawing and Effects
Brush, Pencil, and Eraser
These freehand tools let you draw directly on the image. Select a tool, then click and drag on the canvas. Adjust the size (1-200px) and color in the Properties panel. The Pencil tool disables anti-aliasing for pixel-art style results. The Eraser removes pixels using destination-out compositing.
Highlight
Works like the brush but applies a translucent overlay. Adjust opacity from 10% to 90% in the Properties panel. Useful for emphasizing areas of an image.
Flood Fill
Click any area of the image to fill adjacent pixels of similar color with the current brush color. Adjust the Tolerance slider in the Properties panel (0-128) to control how similar pixels must be to be filled.
Blur and Pixelate
These rectangle-based tools let you apply effects to a specific region. Select the tool, then click and drag to define the area. Blur applies a multi-pass box blur. Pixelate creates a blocky mosaic effect.
Redact
Draw a rectangle to black out sensitive information permanently. The area is filled with solid black directly on the image pixels.
Color Picker
Click any pixel on the image to sample its color. The picked color becomes the current brush color and is displayed in the Properties panel. After picking, the tool automatically switches back to Select.
History System
The Image Editor includes a full non-destructive editing history system that tracks every change you make.
Undo and Redo
Use the Undo (↶) and Redo (↷) buttons in the toolbar, or use keyboard shortcuts:
- Ctrl+Z: Undo the last action
- Ctrl+Y or Ctrl+Shift+Z: Redo an undone action
The buttons automatically enable and disable based on whether there are actions to undo or redo.
History Panel
The History panel in the right sidebar lists every editing action with a descriptive label and icon. The currently active state is highlighted in blue. Click any entry to jump directly to that state — you can instantly restore any point in your editing session, not just the previous step.
Tip: Clicking a previous history entry is faster than pressing Undo multiple times when you need to go back several steps. The history preserves up to 50 states — the oldest entries are automatically removed to manage memory.
Reset to Original
The "Reset Original" button in the toolbar restores the image to its originally uploaded state, clearing all elements and history. A confirmation dialog prevents accidental resets. This is useful when you want to start over while keeping the same source image loaded.
How History Memory Works
The history system uses a hybrid approach to balance memory usage and performance:
Snapshot entries: Raster operations (crop, rotate, draw, fill, effects) store the full image as a data URL, up to 50 snapshots maximum. Old snapshots are discarded automatically when the limit is reached.
Operation entries: Element-only changes (moving, resizing, text edits, property changes) store only the element data as JSON — typically 1-5 KB each with no image copy.
This ensures undo/redo is fast and memory-efficient even for large images.
Keyboard Shortcuts
Press ? at any time to view the full shortcut list inside the editor. All shortcuts are disabled while typing in text inputs.
Best Practices
Use Elements for reusable graphics. Shapes, text, and lines remain as editable elements until you export. You can move, resize, restyle, and reorder them at any time. Brush strokes and effects are applied directly to the image pixels.
Save frequently by exporting to PNG. PNG is lossless and preserves all detail. Export a PNG copy mid-editing to have a fallback, then continue editing. The history is cleared when you load a new image.
Use the History panel as a safety net. The history system tracks up to 50 states, so you can always go back. But loading a new image or clicking "Reset Original" clears the history, so export your work first if you might need it later.
Match export format to your use case. PNG for lossless quality and transparency, JPEG for small file sizes (photos), WebP for the best compression with modern browser support.
Common Mistakes and Fixes
Mistake 1: Cannot select a shape after drawing
Why: The tool is still active (e.g., brush, shape, or text). Active tools consume mouse clicks for drawing.
Fix: Press V to switch back to the Select tool, or click the Select tool button in the toolbar. You can now click elements to select them.
Mistake 2: Element is on the image but hidden
Why: The element might be behind another element, have 0% opacity, or be hidden.
Fix: Check the Elements panel — look for any element with the eye icon crossed out (hidden) or an element listed at the bottom that might be behind others. Click to select it from the list.
Mistake 3: Cannot edit text after creating it
Why: The Text tool creates an element, but you need to activate the inline editor.
Fix: Double-click the text element on the canvas to open the inline editor. You can also modify text in the Properties panel under the "Text" field.
Mistake 4: Undo doesn't go back far enough
Why: You may have exceeded the 50-state history limit, or the action you want to undo was performed before the last image load.
Fix: Use the History panel to jump directly to any state. If the desired state was before a new image was loaded, it is no longer available — load the original image again.
Frequently Asked Questions
How do I undo a mistake in the Image Editor?
Click the Undo button or press Ctrl+Z to step back through your editing history. You can redo with Ctrl+Y or Ctrl+Shift+Z. The History panel on the right lists every action and lets you click any step to jump directly to that state.
Can I add text to my image?
Yes. Select the Text tool (T), click anywhere on the image to create a text element, then type directly into the editor. Use the Properties panel on the right to change font, size, color, bold, italic, alignment, and more.
How do layers work in the Image Editor?
Each shape, text box, or line you add becomes a separate element (layer). The Elements panel on the left lists all layers. You can drag to reorder them, click the eye icon to hide a layer, click the lock icon to prevent accidental edits, or delete layers.
Is there a way to reset my image to the original?
Yes. The "Reset Original" button in the toolbar restores your image to its originally uploaded state and clears all editing history. A confirmation dialog prevents accidental resets.
What image formats can I export to?
You can export to PNG (lossless, supports transparency), JPEG (small file size, adjustable quality), and WebP (best compression, supports transparency).
Are my images uploaded to a server?
No. All editing happens locally in your browser using the HTML5 Canvas API. Your images never leave your device and are not uploaded to any server.
Related Tools
Enhance your image workflow with these powerful, privacy-focused tools:
Image Compressor
Reduce file size with intelligent compression.
Image Resizer
Resize images with high-quality Pica resampling.
Image Cropper
Crop images to custom aspect ratios.
Image Format Converter
Convert between JPG, PNG, WebP, and AVIF.
Edit Your Images Instantly
Crop, rotate, add text and shapes, draw, apply effects, and manage layers — all in your browser with no server uploads.
No sign-up • No server uploads • 100% browser-based processing