Canvas

The canvas in Macaw is not a fixed size like in other image editors. It is fluid like a browser window and can be resized at any moment using the resize handle located on the right side of the canvas. This allows you to see how your design behaves at different viewport widths. The height of the canvas is also dynamic. It grows as you add elements to the page – always giving you room to work.

Scrolling

Horizontal scrolling moves the entire viewport left or right for easier manipulation of elements. Scrolling the canvas vertically, however, scrolls the content of the viewport. This allows you to see the effects of fixed positioning.

Hand Tool (H)

In addition to scrolling the canvas, you can use the Hand Tool to grab and drag it. When using the Hand Tool, a navigator thumbnail will appear in the upper-right corner of the viewport to show the currently visible area. Click anywhere on the navigator to jump to a section in your document.

Adding Breakpoints

You can click and drag the resize handle on the right side of the canvas to watch your designs flow at different viewport sizes. While dragging, a tooltip will appear above the handle to indicate the current width of the canvas. Pressing Cmd Ctrl while dragging allows you to insert a breakpoint at the current width. Breakpoints can also be added using the "+" button in the Breakpoints Palette.

Changing Breakpoints

You can quickly jump to a viewport size by clicking the appropriate link in the Breakpoints Palette. There are also some useful keyboard shortcuts: Cmd+[ Ctrl+[ will move down one breakpoint, Cmd+]Ctr+] will move up one breakpoint and Cmd+\ Ctrl+\ will toggle between the current breakpoint and the default breakpoint.