a PaintCode - Working with Canvases

Working with Canvases

Canvases are the areas you can use to create your drawings. Each canvas generates a separate drawing method.

Drawing CanvasDrawing Canvas

Moving Canvases

To move the canvas within your workspace, simply drag it by its title. The title of each canvas is displayed at the top of the canvas, in the center.

Resizing Canvases

First, select your canvas by clicking on its title on your workspace. Then you can drag the edges of the canvas with cursor to resize the canvas.

Alternatively, you can also set the dimensions of the canvas in the Inspector:

Zoom Control

Adding Canvases

In PaintCode, you can have multiple drawing canvases on the same tab. To add a new canvas, you can use the menu Canvas ▸ New ▸ Default menu, or press SHIFT + COMMAND + N.

Alternatively, you can activate the contextual menu on an empty space in your tab, then choose canvas there:

Adding a new Canvas

Removing Canvases

To remove a canvas, simply click on its title on your workspace, then press the DELETE or BACKSPACE key.

Zooming the Canvas

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 also use the zoom control on the middle toolbar:

Zoom Control

The first item in the canvas creation menu allows you to easily create a new canvas that has the same dimensions as the canvas that is currently active.

Moving around the Canvas

You can use the scrollbars or two finger swipes to move around the Canvas.

Alternatively you can hold down the SPACE key and click & drag mouse around the workspace.

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.

Canvas Display Modes

PaintCode can render your drawings in 4 different density modes:

You can choose between these modes in the middle toolbar. It is also possible to switch between them using the OPTION + D shortcut.

Canvas Display Modes

Non-Retina mode shows you how your drawings will look like on non-Retina displays (most Macs) Retina mode draws with double density - this is how your drawings will look on Retina displays (most iOS devices). Finally, the Infinite precision mode previews your drawings with infinite precision - no matter how far you'll zoom in, the drawings won't be pixellated.

On the importance of Canvas Display Modes

Canvas display modes do not affect the generated code in any way. The generated code is always resolution-independent and will work perfectly on any display. We've designed these modes mainly to aid you during the drawing process.

When you properly align your drawings into the non-Retina mode pixel grid, you can be 100% sure that the drawings will stay sharp (properly aligned to pixel grid) even on displays with higher pixel density. On the other hand, if you use Retina or Infinite mode, it is possible you'll draw somethings that looks sharp on Retina displays, but is in fact blurry on non-Retina devices.

Because of this, you should use non-Retina display mode as a default, and only occasionally switch to Retina or Infinite display mode to check out how things look on higher pixel densities.