Tutorial > MolGrabber3D Canvas

Just like the MolGrabberCanvas constructor, the MolGrabberCanvas3D constructor takes a name, width and height. The MolGrabberCanvas3D class is a child of the Canvas3D class which is in turn a child of the Canvas class.

new ChemDoodle.MolGrabberCanvas3D(name, width, height);

The MolGrabberCanvas3D component provides access to online databases of chemical data. Just type in a search term and click the Show Molecule button to grab it. Coordinates are returned in 3D Ängstroms. Currently, only the PubChem database is supported, contact us to add your database as well.

There is also a MolGrabberCanvas3D.setSearchTerm() function, that will set the text field to an input string parameter and automatically query the currently selected database for that parameter. This is convenient for preloading the component with a given search term and structure.

Note that the MolGrabberCanvas3D component requires access to iChemLabs cloud services to run. Contact us to enable your domains.

Examples

A standard MolGrabberCanvas3D component with a preset search value:

<script>
  let molgrabber = new ChemDoodle.MolGrabberCanvas3D('molgrabber', 300, 300);
  molgrabber.styles.set3DRepresentation('Stick');
  molgrabber.styles.backgroundColor = 'black';
  molgrabber.setSearchTerm('morphine');
</script>