Alternatively, you can zoom in and zoom out using the pinch gesture. Or you can hold down the OPTION key and use the two-finger vertical swipe (or rotate mouse wheel) to zoom in or out. This method focuses on the position of the cursor, so you can easily zoom directly to any part of the Canvas.
You can use the scrollbars or two finger swipes to move around the Canvas.
Additionally, it is possible to navigate around the Canvas using the Preview. If you click on some point in your drawing in the Preview, the Canvas automatically centers at that point. Moreover, you can click and drag in the Preview to move around the Canvas smoothly.
Sometimes, it is useful to move the origin to an arbitrary point in the canvas. For example, you may draw several user interface elements on a single canvas. Some of these elements may not fit the canvas properly and may be too far away from the origin to be useful. Instead of moving the drawings around to obtain the correct source code, you can move the origin to them.
To move the origin, simply drag it to the desired position.
To help you prepare for the world of high-resolution, high-density displays, WebCode allows you to activate the Retina mode. This doubles the resolution of the Canvas.
With the Retina mode turned on, you can instantly see what your drawing would look like on the iPhone 4, iPhone 4S, iPhone 5, the new iPad and other retina-display devices that may come to be in the future.
To toggle the Retina mode on and off, simply click on the Retina button.
The Retina mode does not affect the generated source code in any way - this feature is provided only for your convenience.
You can access the canvas settings by clicking on the “Canvas Settings” button on the right side of the Canvas & Code toolbar. Alternatively, you can also use “Canvas / Settings...” application menu.
WebCode adapts the color of the grid to the underlay color of the canvas. You can, however, set your own grid color. Simply click on the color well.