Editor Canvas

    Canvas is the place where you can construct/import/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 using the vertical and horizontal scroll-bars.

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

    images/s/en_US/8100/6512c1e2a41cdf14570641b46bd2fe3eaeb38d03/_/images/icons/emoticons/lightbulb_on.svg 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 images/download/attachments/5310953/image2015-1-30_11_52_18.png/ Zoom Out images/download/attachments/5310953/image2015-1-30_11_54_0.png 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 images/download/attachments/5309975/image2015-10-13_15_29_42.png 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 images/download/attachments/5309975/image2015-10-13_15_30_15.png button on the same toolbar (or the Ctrl + Enter keyboard shortcut) increases the zoom ratio, placing the selected object in the center. Zoom to Selection button is only available when there is active selection on the canvas.

    Moving molecules on the canvas


    How to move a whole structure on the canvas

    • Select the structure (e.g. double click on one of its atoms or bonds).

    • Press the left mouse button over the green, highlighted area (atoms or bonds), then drag until the selected molecule reaches the desired position.

      (The original place of the structure is visible in grey to help the positioning during the dragging.)

    • Release the mouse button. (The old structure disappears.)


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

    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. The pink circle with a dot is the center of the selected area (pivot point). The molecule can be rotated around this point by clicking on the green dot and dragging the cursor on the canvas. During dragging, you can see the angle of rotation near this green dot. By default, rotation is done in 6° increments. For continuous rotation hold the Shiftbutton while rotating.

    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.

    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 rotation center will be that atom of the selected fragment which connects to the non-selected part of the structure.

    Related page...

    Rotate 3D

    ...back to Editor Overview