Tutorial > MolGrabber Canvas

Do you have a great algorithm and you want your visitors to try it with their own molecules? No problem, now they can quickly search with a MolGrabberCanvas for a molecule of interest. After loading, you can retrieve their molecule with Canvas.getMolecule() to send to whatever functions you desire. More information on post-analysis is provided in the retrieving data page.

The MolGrabberCanvas component provides access to online databases of chemical data. Just type in a search term and click the Show Molecule button to grab it. Currently, the ChemExper, ChemSpider and PubChem databases are supported, contact us to add your database as well. You can choose which database to search using the drop down menu next to the Show Molecule button.

The MolGrabberCanvas constructor takes just a name, width and height:

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

There is also a MolGrabberCanvas.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 MolGrabberCanvas component requires access to iChemLabs cloud services to run. Please view our support options.

Examples

A standard MolGrabberCanvas component with a preset search value:

<script>
  let molgrabber = new ChemDoodle.MolGrabberCanvas('molgrabber', 200, 200);
  molgrabber.styles.atoms_displayTerminalCarbonLabels_2D = true;
  molgrabber.styles.bonds_clearOverlaps_2D = true;
  molgrabber.styles.bonds_overlapClearWidth_2D = 2;
  molgrabber.setSearchTerm('morphine');
</script>