Web Code Globe Web Code Globe


Drawing Canvas

Zooming the Canvas

  • To zoom in, press COMMAND and PLUS.
  • To zoom out, press COMMAND and MINUS.

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.

Moving around the Canvas

PreviewPreview 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.

Changing the origin manually

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.

Retina Canvas

Retina ON 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.

Canvas Settings

Canvas SettingsCanvas Settings 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.

Changing canvas size

To change the size of the canvas, simply enter the desired dimensions in the appropriate text fields..

Changing canvas background color

To change the underlay color of the canvas, simply click on the color well. Note that the underlay color does not have any effect on the generated source code. Also note that this color is used when you export your drawing as a TIFF, PDF or PNG file with background. To export your drawing with a transparent background, set the underlay color to a clear color (or turn off the "Export background" checkbox when exporting your drawing).

Changing canvas background image

First, make sure that the “Use Image” checkbox is checked. Then, drag and drop the desired image on the image well. You can also offset the background using the controls below the image well.

Showing/hiding the grid and changing its color

To show or hide the canvas grid, use the “Show Grid” checkbox in Canvas settings. Alternatively, press OPTION + G.

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.