Demos > 2D Sketcher

The 2D Sketcher works in all browsers, including IE11+, Edge, Safari, Opera, Chrome and Firefox, as well as Mobile Safari and Chrome for Android.
  • Basic Usage

    The sketcher controls are modeled from the ChemDoodle® desktop application (learn more about the desktop software here). Those familiar with the ChemDoodle desktop application will immediately be comfortable drawing structures in this web-based sketching component.

    The most basic sketcher input is received from mouse events. All aspects of the ChemDoodle desktop application are present, from locking bond lengths and angles, to the optimize zone to fragment previews. More information about how to use the ChemDoodle family of sketchers can be found in the ChemDoodle user guide. Pritt Balagopal has also put together a nice tutorial on the Chemistry StackExchange.

    In addition to mouse input, there are buttons and keyboard shortcuts that are described in the other tabs.

    The small grey dot that follows your cursor is an atom (carbon). All structures must begin with an atom. Click to place an atom. Hover and click on a placed atom to place a bond. You can make it so starting atoms are not required by clicking on the Require starting atom checkbox to the right of the sketcher.

    There are two types of ChemDoodle Web Sketchers, the Full Sketcher and the Single Molecule Sketcher. You can choose either above in this demo. Based on the interface, you may be using one or the other or both. The Full Sketcher allows for the creation of multiple chemical structures, shapes and figures. The Single Molecule Sketcher provides a streamlined interface for drawing a single molecular structure.

    If you are developer and would like to learn how to install this sketcher, please refer to the SketcherCanvas documentation.

  • Buttons

    The buttons presented on top of the sketcher provide functionality as described by the following list. Depending on the settings chosen you will see two rows of buttons, or one row and a floating toolbar (as shown here). The first row of buttons consists of global functions, while the second row or floating toolbar contains drawing tools.

    It should also be noted, that in all states, the user can use the mouse wheel to scale the sketcher rendering. Users can also click and drag on the background, with nothing hovered, to move the entire figure. If the shift key is held while dragging the background, the entire figure will be rotated. Double-clicking on the background will center the figure.

    Lasso - Puts the sketcher into lasso mode. You can select content by pressing down and dragging to surround it. The lasso tools are modeled after ChemDoodle desktop and are only available in the Full Sketcher.

    Lasso (shapes only) - Puts the sketcher into lasso mode, but only shapes can be selected. You can select content by pressing down and dragging to surround it. The lasso tools are modeled after ChemDoodle desktop and are only available in the Full Sketcher.

    Rectangular Marquee - Puts the sketcher into rectangular marquee mode. You can select content by pressing down and dragging to encompass the content within the rectangle bounds. The marquee tool is modeled after ChemDoodle desktop and is only available in the Full Sketcher.

    Move - Puts the sketcher into move mode. Highlighting an atom or bond and then pressing the mouse down and dragging will translate those objects. This tool is only available in the Single Molecule Sketcher.

    Clear - Clears the sketcher. In the Single Molecule Sketcher, this leaves a single carbon atom.

    Erase - Puts the sketcher into erase mode. In the Full Sketcher, deleting a bond will remove that bond and deleting an atom will remove that atom and any attached bonds. In the Single Molecule Sketcher, highlighting an atom and clicking will remove that atom and any small disconnected fragments, leaving the largest fragment remaining. Highlighting a bond and clicking will only have an effect if that bond is part of a ring, and in that case it will remove that bond.

    Center - Press this button to center the current content in the center of the sketcher canvas.

    Clean - Cleans the selected structure in the Full Sketcher and the only structure in the Single Molecule Sketcher in 2D. This feature is only accessible through iChemLabs services.

    Flip Horizontally - Flips the selected structure in the Full Sketcher and the only structure in the Single Molecule Sketcher horizontally.

    Flip Vertically - Flips the selected structure in the Full Sketcher and the only structure in the Single Molecule Sketcher vertically.

    Undo - Undoes the last performed action.

    Redo - Redoes the last undone action.

    Cut - Cut the selected content, only available in the Full Sketcher.

    Copy - Copy the selected content, only available in the Full Sketcher.

    Paste - Paste cut or copied chemical content, only available in the Full Sketcher.

    Zoom In - Increases the rendering scale of the sketcher.

    Zoom Out - Decreases the rendering scale of the sketcher.

    Open File - This button pops up a window that allows a user to paste in the contents of an MDL MOLFile or ChemDoodle JSON to be loaded into the sketcher. This will replace the current content.

    Save File - If iChemLabs services are used, then this button will open a file dialog to allow users to save any of the 24 chemical file formats that ChemDoodle supports. Otherwise, this button pops up a window displaying MDL MOLFile content for the selected structure in the Full Sketcher and the only structure in the Single Molecule Sketcher that can be pasted into a text editor and saved with a .mol extension.

    Templates - This button pops up a window displaying templates organized into groups. Select a template by clicking on it. You can then set a substitution point by clicking an atom in the top canvas of the Templates window. The substitution point will be signified with a blue circle. Then click in the sketcher to attach the template to an atom based on the substitution point. Hold down the shift key to modify standard lengths and hold down the alt key to modify standard angles.

    MolGrabber - This button pops up a window displaying a MolGrabberCanvas component that can be used to search the ChemExper, ChemSpider and PubChem databases for molecules of interest and then load them into the sketcher. This feature is only accessible through iChemLabs services. In the Single Molecule Sketcher, loading this content will replace the current content.

    Calculator - Calculates various descriptors for the selected structure in the Full Sketcher and the only structure in the Single Molecule Sketcher. This feature is only accessible through iChemLabs services.

    Labels - After an element has been selected, hover an atom and click to change that atom's label to the selected element symbol. If you press the mouse down and drag to the edge of the optimize zone, a new bond will sprout from that atom to the label in an optimal position. Drag out of the optimize zone and/or use the shift/alt keys to place a bond to this label anywhere.

    Periodic Table - Pops up a periodic table to select a symbol. After a symbol has been selected, hover an atom and click to change that atom's label to the selected element symbol. Press the Close button to close it.

    Atom Label Tool - This button may or may not be present. When selected, atom label mode begins. Hover over an atom and click to open the atom text tool. Type in your desired label and click elsewhere in the sketcher or press the enter or return key to close the text tool. You can also use the space key while an atom is hovered to open the label tool for that atom (only if the ability is provided by the website).

    Set Query to Atom or Bond - This button may or may not be present. When selected, query mode begins. Hover over an atom or bond and click to open the query settings for that object. Set the desired query and press the Set button to set the query. You may also use the Remove button to remove the current query or the Cancel button to close the dialog without changes.

    Bonds - After a bond type has been selected, hover an atom and press the mouse down to begin drawing a new bond of that type. Drag and place the preview to the preferred position and then release the mouse to place the bond. The optimize zone (blue circle) is provided to help place the bond in the optimal position when the mouse pointer is within the bounds of the circle. Hover a bond and click to change that bond's type to the selected type. The single bond tool is special and will add to bond orders instead of overriding them. Hold down the shift key to modify standard lengths and hold down the alt key to modify standard angles.

    Rings - After a ring type has been selected, hover an atom and press the mouse down to begin drawing a new ring of that type. Drag and place the preview to the preferred position and then release the mouse to place the ring. The optimize zone (blue circle) is provided to help place the ring in the optimal position when the mouse pointer is within the bounds of the circle. Hover a bond and press the mouse down to begin drawing a ring from that bond. Drag the preview to either side of the bond and then release the mouse to place the ring. Hold down the shift key to modify standard lengths and hold down the alt key to modify standard angles.

    Arbitrary Ring Size Tool - This tool works identically to the other ring tools, except that the ring size is determined by the distance of the current draw position to the sprout atom. The ring size is displayed in the center of the ring. Hold down the alt key to modify standard angles.

    Carbon Chain Tool - Use this tool to draw chains. The length of the chain will be determined by the distance of the current draw position to the sprout atom. The chain size is displayed at the end of the chain. Hold down the alt key to modify standard angles. Hold down the shift key to lock the chain horizontally or vertically.

    Charges - After a charge sign has been selected, hover an atom and click the mouse to add or subtract from that atom's charge amount.

    Lone Pairs - After a lone pair icon has been selected, hover an atom and click the mouse to add or remove a lone pair from that atom.

    Radicals - After a radical icon has been selected, hover an atom and click the mouse to add or remove a radical from that atom.

    Isotopes - After selecting this tool, hover an atom and click the mouse to edit the isotope value for the atom. A window will drop down from the top of the sketcher with a number field to input the isotope value. The acceptable value range is from 1 to 999. Press the Set button to define the value, and press the Remove button to remove the isotope definition from the atom. Clicking anywhere in the sketcher will cancel the action.

    Implicit Hydrogens - After selecting this tool, hover an atom and click the mouse to edit the implicit hydrogen count for the atom. A window will drop down from the top of the sketcher with a number field to input the implicit hydrogen count. The acceptable value range is from 0 to 15. Press the Set button to define the value, and press the Remove button to remove the isotope definition from the atom, reverting to automatic implicit hydrogen calculations. Clicking anywhere in the sketcher will cancel the action.

    Enhanced Stereochemistry - After selecting this tool, hover an atom and click the mouse to edit the enhanced stereochemistry defintion for the atom. A window will drop down from the top of the sketcher with a choice between 'absolute', 'or' or 'and'. A number field is provided to define the 'or'/'and' operator group (positive integers only). Press the Set button to define the enhanced stereochemistry defintion, and press the Remove button to remove the enhanced stereochemistry definition from the atom. Clicking anywhere in the sketcher will cancel the action.

    Arrows - To place arrows, chose this tool, press the mouse down where the arrow will start and then drag and release the mouse where the arrow will end. Shapes are only available in the full sketcher.

    Atom Mapping Tool - To place an atom mapping, chose this tool, press the mouse down over a hovered atom and then drag and release over another hovered atom. The atom mapping will automatically render. Shapes are only available in the full sketcher.

    Electron Pushing Arrows - To place electron pushing arrows, chose this tool, press the mouse down over a hovered atom or bond and then drag and release over another hovered atom or bond. The pusher will automatically render. You can remove pushers by placing another pusher in the reverse direction or by using the other delete methods with the pusher hovered. Shapes are only available in the full sketcher.

    Bracket - To place brackets, chose this tool, press the mouse down where the first corner of the bracket will start and then drag and release the mouse to where the opposite corner will end. In this mode, there will also be up and down arrows displayed at various positions on the bracket. Pressing the up and down arrows will increment and decrement the values at these positions. The top-right defines the charge amount, the center-left defines the multiple count, and the bottom-right defines the repeat count. Shapes are only available in the full sketcher.

    Repeat Unit - To place repeat unit brackets and define a repeating group, chose this tool, press the mouse down won the first bond end of the repeating group then drag and release the mouse over the second bond end of the repeating group. In this mode, there will also be up and down arrows displayed at the bottom right of the bracket. Pressing the up and down arrows will increment and decrement the values at these positions, defining the repeat count range. Shapes are only available in the full sketcher.

    Variable Attachment Point (VAP) Tool - To place an VAP, chose this tool and press on the sketcher where you would like the VAP asterisk to be placed. The first connection you make to the asterisk using this tool will be the substituent connection (this bond type can be changed by clicking on the bond). Subsequent connections to the asterisk will be attachments. Shapes are only available in the full sketcher.

    Group Buttons

    At the end of some button groups, there is a small button with a downwards facing arrow. This means that there are more options available for this button set. Just click on this downwards facing arrow and select an option. The button adjacent to the downwards facing arrow will pick up this option and will be automatically selected for use.
  • Keyboard Shortcuts

    Just like in the desktop version of ChemDoodle, the web-based sketcher implements a copious amount of keyboard shortcuts. In addition to the listed shortcuts, you can also use the arrow keys to nudge the molecule. All keyboard shortcuts will work regardless of the state or mode the sketcher is in. But keep in mind that many of these shortcuts also are shortcuts for the browser. So these shortcuts will only work if the mouse is over the sketcher.

    Modifier Shortcuts

    Modifier shortcuts are executed by holding down the system meta key, which is ctrl on Windows and Linux and command on macOS.

    a Selects all content in the Full Sketcher.
    c Copies selected content in the Full Sketcher.
    n Clears the sketcher, leaving a lone carbon atom.
    o Pops up a window to load a chemical file.
    s Pops up a window to save the structure in the sketcher in a chemical format.
    v Pastes selected content in the Full Sketcher.
    x Cuts selected content in the Full Sketcher.
    y Redoes the last undone action.
    z Undoes the last performed action.
    + Zooms in.
    - Zooms out.

    When Atoms are Hovered

    When an atom is hovered, the following shortcuts will be active. An atom is hovered if the mouse is close enough to the atom such that the atom is surrounded by an amber circle.

    Alphabet Cycles the hovered atom's label through the element symbols that begin with that letter of the alphabet.
    Digits Adds a carbon chain with length equal to the digit pressed in the most optimal orientation. The 0 key will add a chain of length 10.
    Shift+Digits Adds a ring with number of sides equal to the digit pressed (3+) in the most optimal orientation.
    Delete/Backspace Removes the hovered atom and any attached bonds and any small attached bonds. Leaves the largest fragment remaining in the Single Molecule Sketcher.
    +/- Increase/Decrease the charge amount of the atom.
    Space Open the atom label tool for the atom (in proprietary builds only).

    When Bonds are Hovered

    When a bond is hovered, the following shortcuts will be active. A bond is hovered if the mouse is close enough to the center of the bond such that the bond is encapsulated by two amber semicircles.

    Digits Changes the bond's order to the digit. Only 1-3 work. 7 will change the bond to a protruding bond and 8 will change it to a recessed bond.
    Shift+Digits Adds a ring with number of sides equal to the digit pressed (3+) in the most optimal orientation.
    Delete/Backspace Removes the hovered bond. In the Single Molecule Sketcher, the bond is removed if and only if that bond is a member of a ring.
    f Flip the bond orientation.

    When Shapes are Hovered

    When a shape is hovered, the following shortcuts will be active. A shape is hovered if the mouse is close enough to the control points of the shape or over the shape such that the shape control points appear. These functions will only work in the Full Sketcher, because only the Full Sketcher allows shapes.

    Delete/Backspace Removes the hovered shape.

    Lasso Shortcuts

    These shortcuts will make it easier to work with the lasso tool. The functions are only available in the Full Sketcher.

    Tab Select the next molecule.
    Shift+Tab Select the next shape.
    Space Empties the selection and starts the Single Bond tool.
    Delete/Backspace Removes the selected content.
    ←↑→↓ Arrow keys will nudge selected content.
  • Videos

    Click the play button to watch an introduction video.

    image
  • Support

    If the website implementing the web-based sketcher does not access iChemLabs services, then important functionality that you may benefit from is missing from their implementation. Please urge the providers of that service to contact us and provide users like you with premium services.

    If you need help for any reason, please contact us.

Get your work done with our popular desktop software.