Page tree


Canvas is the place where you can construct, import, or edit your molecules in Marvin JS. There are several options to help you always see the structure in your focus of interest. 

Navigating on the canvas 

You can navigate on the canvas by using the vertical and horizontal scroll-bars.

The scroll-bars become visible only when the contents of the canvas exceed the canvas size.


(lightbulb) Regardless of the currently active tool, you can get into "navigation mode" by pressing the middle mouse button. In "navigation mode", the canvas can be moved by the mouse cursor until the middle mouse button is released.

Modifying the zoom ratio

The contents of the canvas can be reduced or magnified at will with the Zoom In Zoom In Icon/ Zoom Out Zoom Out Icon buttons on the General toolbar. The zoom ratio can be changed by rolling the mouse wheel, where the center of the zooming is the position of the cursor.

The Zoom All Zoom All Icon button on the General toolbar sets the optimal magnification to view everything on the canvas. The Enter shortcut can also be used for this purpose.

The Zoom to Selection Zoom to Selection Icon button on the same toolbar (or the Ctrl+Enter keyboard shortcut) increases the zoom ratio, placing the selected object in the center. The Zoom to Selection button is only available when there is active selection on the canvas.

Moving molecules on the canvas

  1. Select the whole structure by double clicking on one of its atoms or bonds.
  2. Hold down the left mouse button on the blue, highlighted area of the structure (atoms or bonds).
  3. Drag the structure to the desired position.
  4. Release the mouse button, the structure is repositioned now.

Moving Molecules on the Canvas

When the selection contains only a fragment, the molecule will be distorted due to the changes in bond lengths and bond angles.

Moving a Fragment

Rotating molecules in 2D

Rotate around the molecule center

When a structure has been selected, it can be rotated around its center in two dimensions. A pink circle with a dot is indicating the center of the selected area (pivot point). The molecule can be rotated around this point by clicking on the blue dot and dragging the cursor on the canvas. During dragging, you can see the angle of rotation near this blue dot. By default, rotation is done in 6° increments. For continuous rotation hold down the Shift button while rotating.

Rotating Around the Molecule Center

Move the center of the rotation

When a whole molecule is selected, the original center of rotation can be relocated by dragging. In this case, if the new rotation center is too close to its original position, it will be snapped back to it. However, pressing the Shift key while dragging the center of rotation allows it to be as close to its original place as you wish. Moving the center lets you rotate the molecule around any point of the canvas. The image of the starting structure remains displayed in grey during rotation.

Moving the Center of the Rotation

Rotate fragments in a structure

When a selected part is only a fragment which connects to the rest of the molecule with one bond only, you cannot move the pivot point (which is gray in this case). In such cases, the center of rotation will be the atom that connects the selected and non-selected parts of the structure.

Rotate Fragments of a Structure

Related page...