What is the Zoom Tool?
Quick Start Guide
Select the Zoom Tool
Click the zoom tool icon in the toolbar or press Z to activate it.
Choose Your Method
Use zoom buttons for quick steps, the slider for smooth adjustments, or type exact percentages in the input box.
Navigate Your Canvas
Pan around by holding Shift and dragging, or use the middle mouse button to move your view.
Use Smart Features
Press Ctrl+0 to automatically fit all content on screen, or Home to return to your starting view.
Zoom Controls
Zoom Levels Explained
Understanding Zoom Percentages
See entire large drawings
Good overview
Default view
Comfortable detail work
Pixel-level precision
The Easy Zoom slider covers 50%-150% for the most commonly used range
Keyboard Shortcuts
| Action | Windows/Linux | Mac |
|---|---|---|
| Zoom In | Ctrl + + | ⌘ + + |
| Zoom Out | Ctrl + - | ⌘ + - |
| Fit to Content | Ctrl + 0 | ⌘ + 0 |
| Reset to 100% | Ctrl + Shift + 0 | ⌘ + Shift + 0 |
| Home View | Home | Home |
| Mouse Wheel Zoom | Ctrl + Scroll | ⌘ + Scroll |
| Pan (Move View) | Shift + Drag | Shift + Drag |
| Pan with Mouse | Middle Mouse + Drag | Middle Mouse + Drag |
Advanced Features
Smart Mouse Wheel Zoom
Hold Ctrl (or ⌘ on Mac) and scroll your mouse wheel for smooth, precise zooming. The zoom centres on your mouse cursor position, making it easy to zoom into exactly where you want to look!
Touch Gestures
On touch-enabled devices, the zoom tool supports intuitive gestures:
- Pinch to Zoom: Use two fingers to pinch in or out for smooth zooming
- Double-Tap: Quickly zoom between 100% and 200% by double-tapping
- Two-Finger Pan: Touch support for moving around the canvas
Intelligent Fit to Content
This feature scans all your artwork and automatically calculates the perfect zoom level to show everything on screen. It includes 50 pixels of padding around your content and handles complex shapes, transforms, and grouped elements intelligently.
Smooth Panning
When zoomed in beyond the canvas view, you can move around by:
- Hold Shift and drag with your mouse
- Click and drag with the middle mouse button
- Your cursor changes to a hand icon when panning is active
- Panning works smoothly at any zoom level
Error Recovery System
The zoom tool includes automatic error recovery with up to 3 retry attempts. If something goes wrong, it will attempt to restore a safe view automatically. You can also use the Home button to return to a known good state. If multiple recovery attempts fail, the tool enters safe mode and displays a notification.
Professional Tips
• Zoom-to-cursor: Hold Ctrl and scroll your mouse wheel to zoom directly to where you're pointing
• Detail work: Use 200-300% zoom for fine details, then zoom out to check overall composition
• Quick overview: Press Ctrl+0 anytime to see your complete artwork
• Efficient workflow: Use the Easy Zoom slider for quick adjustments, precision input for exact values
• Lost your place? Press Home to return to your starting view instantly
• Touch devices: Use pinch gestures for natural zooming and double-tap for quick zoom toggles
Technical Details
Zoom Range and Precision
The zoom tool supports a range from 5% (1/20th size) to 300% (3× size) with smooth interpolation. The Easy Zoom slider covers 50%-150% for daily use, while the precision input allows exact percentages for professional work. Zoom changes in 10% increments when using the zoom in/out buttons.
ViewBox Management
Zoom is implemented using SVG viewBox manipulation, ensuring crisp rendering at all zoom levels. The system maintains aspect ratios and handles coordinate transformations automatically. The home view is stored on initialisation to provide a consistent reference point.
Performance Optimisation
The zoom tool includes 16ms debouncing for smooth slider operation and efficient rendering updates. It minimises redraws and uses optimised coordinate calculations for responsive performance. Touch events are handled with passive listeners where appropriate to improve scrolling performance.
Error Handling
The tool implements a robust error recovery system with automatic retry logic (up to 3 attempts) and fallback to safe mode if recovery fails. All errors are logged with context and timestamp information for debugging purposes.
Common Questions
Why can't I zoom in more than 300%?
300% provides sufficient detail for most work whilst maintaining good performance. Higher zoom levels can cause rendering issues and make navigation difficult.
The Easy Zoom slider doesn't go to my desired level. What do I do?
The slider covers 50%-150% for common use. For other zoom levels, click on the percentage display and type your desired value (5%-300%).
How do I see my whole drawing at once?
Use "Fit to Content" (Ctrl+0) to automatically adjust the view to show all your artwork with appropriate padding.
I'm zoomed in but can't see what I want. How do I move around?
Hold Shift and drag to pan around, or use the middle mouse button to drag. Your cursor will show a hand icon when panning.
Can I save my preferred zoom level?
The zoom level resets when you reload the page, but you can use "Home View" to return to your canvas's default starting position anytime.
Why does the zoom sometimes feel sluggish?
The zoom tool includes smooth animations and 16ms debouncing for better user experience. If performance is an issue, try closing other browser tabs or using simpler zoom methods like the buttons instead of the slider.
Does the zoom tool work on touch devices?
Yes! The zoom tool fully supports touch gestures including pinch-to-zoom, double-tap zoom, and two-finger panning on touch-enabled devices.
What happens if the zoom tool encounters an error?
The zoom tool includes automatic error recovery. It will attempt to fix issues automatically (up to 3 times), display a warning message, and if necessary, enter safe mode to prevent further problems. You can always press Home to return to a known good state.