CanvasWrapper

SmilesDrawer. CanvasWrapper

A class wrapping a canvas element.

Constructor

new CanvasWrapper(target, theme, options)

Source:
Properties:
Name Type Description
canvas HTMLElement

The HTML element for the canvas associated with this CanvasWrapper instance.

ctx CanvasRenderingContext2D

The CanvasRenderingContext2D of the canvas associated with this CanvasWrapper instance.

colors Object

The colors object as defined in the SmilesDrawer options.

opts Object

The SmilesDrawer options.

drawingWidth Number

The width of the canvas.

drawingHeight Number

The height of the canvas.

offsetX Number

The horizontal offset required for centering the drawing.

offsetY Number

The vertical offset required for centering the drawing.

fontLarge Number

The large font size in pt.

fontSmall Number

The small font size in pt.

The constructor for the class CanvasWrapper.

Parameters:
Name Type Description
target String | HTMLElement

The canvas id or the canvas HTMLElement.

theme Object

A theme from the smiles drawer options.

options Object

The smiles drawer options object.

Methods

clear()

Source:

Clear the canvas.

drawAromaticityRing(ring)

Source:

Draws a ring inside a provided ring, indicating aromaticity.

Parameters:
Name Type Description
ring SmilesDrawer.Ring

A ring.

drawBall(x, y, elementName)

Source:

Draw a ball to the canvas.

Parameters:
Name Type Description
x Number

The x position of the text.

y Number

The y position of the text.

elementName String

The name of the element (single-letter).

drawCircle(x, y, radius, color, fillopt, debugopt, debugTextopt)

Source:

Draws a circle to a canvas context.

Parameters:
Name Type Attributes Default Description
x Number

The x coordinate of the circles center.

y Number

The y coordinate of the circles center.

radius Number

The radius of the circle

color String

A hex encoded color.

fill Boolean <optional>
true

Whether to fill or stroke the circle.

debug Boolean <optional>
false

Draw in debug mode.

debugText String <optional>
''

A debug message.

drawDashedWedge(line, width)

Source:

Draw a dashed wedge on the canvas.

Parameters:
Name Type Default Description
line SmilesDrawer.Line

A line.

width Number 6

The wedge width.

drawDebugPoint(x, y, debugTextopt, coloropt)

Source:

Draws a dubug dot at a given coordinate and adds text.

Parameters:
Name Type Attributes Default Description
x Number

The x coordinate.

y Number

The y coordindate.

debugText String <optional>
''

A string.

color String <optional>
'#f00'

A color in hex form.

drawDebugText(x, y, text)

Source:

Draws a debug text message at a given position

Parameters:
Name Type Description
x Number

The x coordinate.

y Number

The y coordinate.

text String

The debug text.

drawLine(line, dashedopt, alphaopt)

Source:

Draw a line to a canvas.

Parameters:
Name Type Attributes Default Description
line SmilesDrawer.Line

A line.

dashed Boolean <optional>
false

Whether or not the line is dashed.

alpha Number <optional>
1.0

The alpha value of the color.

drawPoint(x, y, elementName)

Source:

Draw a point to the canvas.

Parameters:
Name Type Description
x Number

The x position of the point.

y Number

The y position of the point.

elementName String

The name of the element (single-letter).

drawText(x, y, elementName, hydrogens, direction, isTerminal, charge, isotope, attachedPseudoElements)

Source:

Draw a text to the canvas.

Parameters:
Name Type Description
x Number

The x position of the text.

y Number

The y position of the text.

elementName String

The name of the element (single-letter).

hydrogens Number

The number of hydrogen atoms.

direction String

The direction of the text in relation to the associated vertex.

isTerminal Boolean

A boolean indicating whether or not the vertex is terminal.

charge String

The charge of the atom.

isotope Number

The isotope number.

attachedPseudoElements Array.<Object>

A map with containing information for pseudo elements or concatinated elements. The key is comprised of the element symbol and the hydrogen count.

attachedPseudoElement[].element String

The element symbol.

attachedPseudoElement[].count Number

The number of occurences that match the key.

attachedPseudoElement[].hyrogenCount Number

The number of hydrogens attached to each atom matching the key.

drawWedge(line, width)

Source:

Draw a wedge on the canvas.

Parameters:
Name Type Default Description
line SmilesDrawer.Line

A line.

width Number 3

The wedge width.

getColor(key) → {String}

Source:

Returns the hex code of a color associated with a key from the current theme.

Parameters:
Name Type Description
key String

The color key in the theme (e.g. C, N, BACKGROUND, ...).

Returns:

A color hex value.

Type
String

reset()

Source:

Resets the transform of the canvas.

scale(vertices)

Source:

Scale the canvas based on vertex positions.

Parameters:
Name Type Description
vertices Array.<SmilesDrawer.Vertex>

An array of vertices containing the vertices associated with the current molecule.

setTheme(theme)

Source:

Sets a provided theme.

Parameters:
Name Type Description
theme Object

A theme from the smiles drawer options.

updateSize(width, height)

Source:

Update the width and height of the canvas

Parameters:
Name Type Description
width Number
height Number