Getting started with RDKit.js

Drawing molecules

First we'll work with an SVG drawing:


As of v2020.09 of the RDKit we can do the same thing using the HTML5 canvas:


We can do substructure searches and highlight the results:


You can also change drawing options and do highlighting with the SVG renderer, but we don't show it here. You just need to replace
mol.draw_to_canvas_with_highlights(canvas, mdetails);
with
var svg = mol.get_svg_with_highlights(mdetails);

The same call can be used to control drawing options or to manually set the atoms/bonds which should be highlighted:


and of course we can combine the two:


The currently supported options are:
  1. atoms,bonds: lists to specify which atoms/bonds are highlighted
  2. width,heightoffsetx,offsety: used to draw in a subregion of a canvas. Only supported by the HTML5 canvas drawer.
  3. legend: the legend drawn under the molecule
  4. These MolDrawOptions values: atomLabelDeuteriumTritium, dummiesAreAttachments, circleAtoms, continuousHighlight, fillHighlights, highlightRadius, flagCloseContactsDist, includeAtomTags, clearBackground, legendFontSize, maxFontSize, minFontSize, annotationFontScale, fontFile, multipleBondOffset, padding, additionalAtomLabelPadding, bondLineWidth, scaleBondWidth, scaleHighlightBondWidth, highlightBondWidthMultiplier, prepareMolsBeforeDrawing, fixedScale, fixedBondLength, rotate, addAtomIndices, addBondIndices, addStereoAnnotation, atomHighlightsAreCircles, centreMoleculesBeforeDrawing, explicitMethyl, includeMetadata, includeRadicals, highlightColour, backgroundColour, legendColour, symbolColour, atomLabels

It's often useful to generate molecule renderings where the coordinates of a core is constrained.