1. Overview

The new zoom functionality for Kajoo canvas in the Project section is designed to give you enhanced control over the canvas view. With this update, you can:

Zoom in and out on the canvas (ranging from 25% to 500%).
Pan (move) the canvas using a hand-tool style interaction.
Resize the canvas in both width and height.
Switch between breakpoints using a dropdown menu.
Reset the zoom level to the default 100% with a single click.
Maintain scroll functionality while zooming.

This allows you to adjust the canvas view without affecting your browser zoom or interrupting your scrolling experience.

2. Zooming the Canvas

2.1 Zoom Levels and Controls

Zoom Range: The canvas zoom level can be adjusted from 25% (most zoomed out) to 500% (most zoomed in). The default (or reset) zoom level is 100%.

Reset Zoom:

Click on the percentage indicator to instantly reset the zoom to 100%.
This action works regardless of the current breakpoint or canvas size.

2.2 Zooming Methods

On Screen Controls

Zoom In/Out Buttons: Use the provided controls on the Kajoo interface to incrementally adjust the zoom level.

Zoom Out Further: If you need an even more zoomed-out view, continue clicking the zoom-out control until you reach your desired level.

Mouse Wheel with Keyboard Modifier

Using the Mouse Wheel:

Hold the Control (Ctrl) key on your keyboard in windows or Command (Cmd) key on macOS.
Scroll the mouse wheel upward to zoom in and downward to zoom out.
This method provides a quick and precise way to adjust the canvas view.

3. Panning the Canvas

3.1 Moving Around the Canvas

Space Bar Activation:

Press and hold the Space key on your keyboard.
While holding the Space key, click and drag your mouse to pan (move) the canvas around.
This “hand tool” functionality lets you navigate your canvas smoothly, even when zoomed in or out.

Maintained Scrolling:

The zoom functionality has been designed to allow vertical scrolling (up and down) even when you are zooming. This means you can adjust the view without interrupting your ability to scroll through your canvas content.

4. Adjusting the Canvas Size

4.1 Resizing the Canvas

Width and Height Adjustments:

You can resize the canvas width by dragging the canvas edge horizontally.
To increase the canvas height, drag the bottom edge of the canvas.

Expanding Workspace:

To gain more screen real estate, click on the “+” icon to collapse the side menu. This gives you a larger, uncluttered canvas area for your work.

5. Switching Breakpoints

5.1 Using the Breakpoint Dropdown

Breakpoint Selection:

Locate the dropdown menu that lists available breakpoints.
Select the desired breakpoint from the list.
Tip: Always start with the largest or default breakpoint. This ensures that all styles are applied and then trickle down properly to the smaller breakpoints.

This functionality allows you to see how your project will adapt to different device sizes and screen resolutions.

6. Additional Tips and Considerations

Non-Browser Zoom:

Remember, these zoom adjustments apply only to the Kajoo canvas. There’s no need to use your browser’s zoom controls.

Large Breakpoints and Resetting:

Even when you’re working on a large breakpoint, using the reset button (100%) will adjust the view correctly without limiting the canvas to a smaller size.

Efficient Navigation:

Combining zooming and panning features can significantly improve your workflow, especially when working on detailed or large-scale projects.

Frequently Asked Questions (FAQs)

Q1: What happens if I exceed the zoom limits?
The canvas zoom is strictly limited between 25% and 500%. You cannot zoom out beyond 25% or zoom in beyond 500%.

Q2: Will using the mouse wheel with the Ctrl key affect other browser functions?
No. The functionality is specifically enabled within the Kajoo canvas area, so it won’t interfere with your browser’s native zoom.

Q3: How do I ensure that styles are applied correctly across breakpoints?
Always begin your work on the largest (or default) breakpoint. Then, adjust to smaller breakpoints via the dropdown to verify that styles cascade properly.

Q4: Is there a way to regain lost canvas space if I accidentally zoom in too far?
Yes, simply click on the percentage indicator to reset the zoom to 100%, or use the zoom-out controls to gradually return to your desired view.