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:
- atoms,bonds: lists to specify which atoms/bonds are highlighted
- width,heightoffsetx,offsety: used to
draw in a subregion of a canvas. Only supported by the HTML5 canvas
drawer.
- legend: the legend drawn under the molecule
- 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.