Class: drawutils

drawutils(context, fillShaped)

new drawutils(context, fillShaped)

The constructor.
Parameters:
Name Type Description
context Context2D The drawing context.
fillShaped boolean Indicates if the constructed drawutils should fill all drawn shapes (if possible).
Source:

Methods

arrow(zA, zB, color) → {void}

Draw a line and an arrow at the end (zB) of the given line with the specified (CSS-) color.
Parameters:
Name Type Description
zA Vertex The start point of the arrow-line.
zB Vertex The end point of the arrow-line.
color string Any valid CSS color string.
Source:
Returns:
Type
void

arrow(zA, zB, color) → {void}

Draw a line and an arrow at the end (zB) of the given line with the specified (CSS-) color.
Parameters:
Name Type Description
zA Vertex The start point of the arrow-line.
zB Vertex The end point of the arrow-line.
color string Any valid CSS color string.
Source:
Returns:
Type
void

circle(center, radius, color) → {void}

Draw a circle with the specified (CSS-) color and radius.

Note that if the x- and y- scales are different the result will be an ellipse rather than a circle.
Parameters:
Name Type Description
center Vertex The center of the circle.
radius number The radius of the circle.
color string The CSS color to draw the circle with.
Source:
Returns:
Type
void

circle(center, radius, color) → {void}

Draw a circle with the specified (CSS-) color and radius.

Note that if the x- and y- scales are different the result will be an ellipse rather than a circle.
Parameters:
Name Type Description
center Vertex The center of the circle.
radius number The radius of the circle.
color string The CSS color to draw the circle with.
Source:
Returns:
Type
void

circleHandle(center, radius, color) → {void}

Draw a circle handle with the given CSS color.

It is an inherent featur of the handle functions that the drawn elements are not scaled and not distorted. So even if the user zooms in or changes the aspect ratio, the handles will be drawn as even shaped circles.
Parameters:
Name Type Description
center Vertex The center of the circle.
radius number The radius of the circle.
color string The CSS color to draw the circle with.
Source:
Returns:
Type
void

circleHandle(center, radius, color) → {void}

Draw a circle handle with the given CSS color.

It is an inherent featur of the handle functions that the drawn elements are not scaled and not distorted. So even if the user zooms in or changes the aspect ratio, the handles will be drawn as even shaped circles.
Parameters:
Name Type Description
center Vertex The center of the circle.
radius number The radius of the circle.
color string The CSS color to draw the circle with.
Source:
Returns:
Type
void

crosshair(center, radius, color) → {void}

Draw a crosshair with given radius and color at the given position.

Note that the crosshair radius will not be affected by scaling.
Parameters:
Name Type Description
center Vertex The center of the crosshair.
radius number The radius of the crosshair.
color string The CSS color to draw the crosshair with.
Source:
Returns:
Type
void

crosshair(center, radius, color) → {void}

Draw a crosshair with given radius and color at the given position.

Note that the crosshair radius will not be affected by scaling.
Parameters:
Name Type Description
center Vertex The center of the crosshair.
radius number The radius of the crosshair.
color string The CSS color to draw the crosshair with.
Source:
Returns:
Type
void

cubicBezier(startPoint, endPoint, startControlPoint, endControlPoint, color, lineWidth) → {void}

Draw the given (cubic) bézier curve.
Parameters:
Name Type Description
startPoint Vertex The start point of the cubic Bézier curve
endPoint Vertex The end point the cubic Bézier curve.
startControlPoint Vertex The start control point the cubic Bézier curve.
endControlPoint Vertex The end control point the cubic Bézier curve.
color string The CSS color to draw the curve with.
lineWidth number | string (optional) The line width to use.
Source:
Returns:
Type
void

cubicBezier(startPoint, endPoint, startControlPoint, endControlPoint, color) → {void}

Draw the given (cubic) bézier curve.
Parameters:
Name Type Description
startPoint Vertex The start point of the cubic Bézier curve
endPoint Vertex The end point the cubic Bézier curve.
startControlPoint Vertex The start control point the cubic Bézier curve.
endControlPoint Vertex The end control point the cubic Bézier curve.
color string The CSS color to draw the curve with.
Source:
Returns:
Type
void

cubicBezierCurveHandleLines(curve) → {void}

Draw the given handle cubic Bézier curve handle lines. The colors for this are fixed and cannot be specified.
Parameters:
Name Type Description
curve BezierCurve The curve.
Source:
Returns:
Type
void

cubicBezierCurveHandleLines(curve) → {void}

Draw the given handle cubic Bézier curve handle lines. The colors for this are fixed and cannot be specified.
Parameters:
Name Type Description
curve BezierCurve The curve.
Source:
Returns:
Type
void

cubicBezierPath(path, color) → {void}

Draw the given (cubic) Bézier path. The given path must be an array with n*3+1 vertices, where n is the number of curves in the path:
 [ point1, point1_startControl, point2_endControl, point2, point2_startControl, point3_endControl, point3, ... pointN_endControl, pointN ]
Parameters:
Name Type Description
path Array.<Vertex> The cubic bezier path as described above.
color string The CSS colot to draw the path with.
Source:
Returns:
Type
void

cubicBezierPath(path, color) → {void}

Draw the given (cubic) Bézier path. The given path must be an array with n*3+1 vertices, where n is the number of curves in the path:
 [ point1, point1_startControl, point2_endControl, point2, point2_startControl, point3_endControl, point3, ... pointN_endControl, pointN ]
Parameters:
Name Type Description
path Array.<Vertex> The cubic bezier path as described above.
color string The CSS colot to draw the path with.
Source:
Returns:
Type
void

diamondHandle(center, size, color) → {void}

Draw a diamond handle (square rotated by 45°) with the given CSS color. It is an inherent featur of the handle functions that the drawn elements are not scaled and not distorted. So even if the user zooms in or changes the aspect ratio, the handles will be drawn as even shaped diamonds.
Parameters:
Name Type Description
center Vertex The center of the diamond.
size Vertex The x/y-size of the diamond.
color string The CSS color to draw the diamond with.
Source:
Returns:
Type
void

diamondHandle(center, size, color) → {void}

Draw a diamond handle (square rotated by 45°) with the given CSS color. It is an inherent featur of the handle functions that the drawn elements are not scaled and not distorted. So even if the user zooms in or changes the aspect ratio, the handles will be drawn as even shaped diamonds.
Parameters:
Name Type Description
center Vertex The center of the diamond.
size Vertex The x/y-size of the diamond.
color string The CSS color to draw the diamond with.
Source:
Returns:
Type
void

dot(p, color) → {void}

Draw a 1x1 dot with the specified (CSS-) color.
Parameters:
Name Type Description
p Vertex The position to draw the dot at.
color string The CSS color to draw the dot with.
Source:
Returns:
Type
void

dot(p, color) → {void}

Draw a 1x1 dot with the specified (CSS-) color.
Parameters:
Name Type Description
p Vertex The position to draw the dot at.
color string The CSS color to draw the dot with.
Source:
Returns:
Type
void

ellipse(center, radiusX, radiusY, color, lineWidth) → {void}

Draw an ellipse with the specified (CSS-) color and thw two radii.
Parameters:
Name Type Default Description
center Vertex The center of the ellipse.
radiusX number The radius of the ellipse.
radiusY number The radius of the ellipse.
color string The CSS color to draw the ellipse with.
lineWidth number 1 An optional line width param (default is 1).
Source:
Returns:
Type
void

ellipse(center, radiusX, radiusY, color) → {void}

Draw an ellipse with the specified (CSS-) color and thw two radii.
Parameters:
Name Type Description
center Vertex The center of the ellipse.
radiusX number The radius of the ellipse.
radiusY number The radius of the ellipse.
color string The CSS color to draw the ellipse with.
Source:
Returns:
Type
void

grid(center, width, height, sizeX, sizeY, color) → {void}

Draw a grid of horizontal and vertical lines with the given (CSS-) color.
Parameters:
Name Type Description
center Vertex The center of the grid.
width number The total width of the grid (width/2 each to the left and to the right).
height number The total height of the grid (height/2 each to the top and to the bottom).
sizeX number The horizontal grid size.
sizeY number The vertical grid size.
color string The CSS color to draw the grid with.
Source:
Returns:
Type
void

grid(center, width, height, sizeX, sizeY, color) → {void}

Draw a grid of horizontal and vertical lines with the given (CSS-) color.
Parameters:
Name Type Description
center Vertex The center of the grid.
width number The total width of the grid (width/2 each to the left and to the right).
height number The total height of the grid (height/2 each to the top and to the bottom).
sizeX number The horizontal grid size.
sizeY number The vertical grid size.
color string The CSS color to draw the grid with.
Source:
Returns:
Type
void

handle(startPoint, endPoint) → {void}

Draw the given handle and handle point (used to draw interactive Bézier curves). The colors for this are fixed and cannot be specified.
Parameters:
Name Type Description
startPoint Vertex The start of the handle.
endPoint Vertex The end point of the handle.
Source:
Returns:
Type
void

handle(startPoint, endPoint) → {void}

Draw the given handle and handle point (used to draw interactive Bézier curves). The colors for this are fixed and cannot be specified.
Parameters:
Name Type Description
startPoint Vertex The start of the handle.
endPoint Vertex The end point of the handle.
Source:
Returns:
Type
void

handleLine(startPoint, endPoint) → {void}

Draw a handle line (with a light grey).
Parameters:
Name Type Description
startPoint Vertex The start point to draw the handle at.
endPoint Vertex The end point to draw the handle at.
Source:
Returns:
Type
void

handleLine(startPoint, endPoint) → {void}

Draw a handle line (with a light grey).
Parameters:
Name Type Description
startPoint Vertex The start point to draw the handle at.
endPoint Vertex The end point to draw the handle at.
Source:
Returns:
Type
void

image(image, position, size) → {void}

Draw an image at the given position with the given size.

Note: SVG images may have resizing issues at the moment.Draw a line and an arrow at the end (zB) of the given line with the specified (CSS-) color.
Parameters:
Name Type Description
image Image The image object to draw.
position Vertex The position to draw the the upper left corner at.
size Vertex The x/y-size to draw the image with.
Source:
Returns:
Type
void

image(image, position, size) → {void}

Draw an image at the given position with the given size.

Note: SVG images may have resizing issues at the moment.Draw a line and an arrow at the end (zB) of the given line with the specified (CSS-) color.
Parameters:
Name Type Description
image Image The image object to draw.
position Vertex The position to draw the the upper left corner at.
size Vertex The x/y-size to draw the image with.
Source:
Returns:
Type
void

label(text, x, y, rotationopt) → {void}

Draw a non-scaling text label at the given position. Note that these are absolute label positions, they are not affected by offset or scale.
Parameters:
Name Type Attributes Description
text string The text to draw.
x number The x-position to draw the text at.
y number The y-position to draw the text at.
rotation number <optional>
The (aoptional) rotation in radians.
Source:
Returns:
Type
void

label(text, x, y, rotationopt) → {void}

Draw a non-scaling text label at the given position.
Parameters:
Name Type Attributes Description
text string The text to draw.
x number The x-position to draw the text at.
y number The y-position to draw the text at.
rotation number <optional>
The (aoptional) rotation in radians.
Source:
Returns:
Type
void

line(zA, zB, color, lineWidth?) → {void}

Draw the line between the given two points with the specified (CSS-) color.
Parameters:
Name Type Description
zA Vertex The start point of the line.
zB Vertex The end point of the line.
color string Any valid CSS color string.
lineWidth? number | string [optional] The line's width.
Source:
Returns:
Type
void

line(zA, zB, color) → {void}

Draw the line between the given two points with the specified (CSS-) color.
Parameters:
Name Type Description
zA Vertex The start point of the line.
zB Vertex The end point of the line.
color string Any valid CSS color string.
Source:
Returns:
Type
void

point(p, color) → {void}

Draw the given point with the specified (CSS-) color and radius 3.
Parameters:
Name Type Description
p Vertex The position to draw the point at.
color string The CSS color to draw the point with.
Source:
Returns:
Type
void

point(p, color) → {void}

Draw the given point with the specified (CSS-) color and radius 3.
Parameters:
Name Type Description
p Vertex The position to draw the point at.
color string The CSS color to draw the point with.
Source:
Returns:
Type
void

polygon(polygon, color) → {void}

Draw a polygon.
Parameters:
Name Type Description
polygon Polygon The polygon to draw.
color string The CSS color to draw the polygon with.
Source:
Returns:
Type
void

polygon(polygon, color) → {void}

Draw a polygon.
Parameters:
Name Type Description
polygon Polygon The polygon to draw.
color string The CSS color to draw the polygon with.
Source:
Returns:
Type
void

polyline(vertices, isOpen, color, lineWidth) → {void}

Draw a polygon line (alternative function to the polygon).
Parameters:
Name Type Description
vertices Array.<Vertex> The polygon vertices to draw.
isOpen boolan If true the polyline will not be closed at its end.
color string The CSS color to draw the polygon with.
lineWidth number The line width (default is 1.0);
Source:
Returns:
Type
void

polyline(vertices, isOpen, color) → {void}

Draw a polygon line (alternative function to the polygon).
Parameters:
Name Type Description
vertices Array.<Vertex> The polygon vertices to draw.
isOpen boolan If true the polyline will not be closed at its end.
color string The CSS color to draw the polygon with.
Source:
Returns:
Type
void

quadraticBezier(startPoint, controlPoint, endPoint, color, lineWidth) → {void}

Draw the given (quadratic) bézier curve.
Parameters:
Name Type Description
startPoint Vertex The start point of the cubic Bézier curve
controlPoint Vertex The control point the cubic Bézier curve.
endPoint Vertex The end control point the cubic Bézier curve.
color string The CSS color to draw the curve with.
lineWidth number | string (optional) The line width to use.
Source:
Returns:
Type
void

raster(center, width, height, sizeX, sizeY, color) → {void}

Draw a raster of crosshairs in the given grid.
This works analogue to the grid() function
Parameters:
Name Type Description
center Vertex The center of the raster.
width number The total width of the raster (width/2 each to the left and to the right).
height number The total height of the raster (height/2 each to the top and to the bottom).
sizeX number The horizontal raster size.
sizeY number The vertical raster size.
color string The CSS color to draw the raster with.
Source:
Returns:
Type
void

raster(center, width, height, sizeX, sizeY, color) → {void}

Draw a raster of crosshairs in the given grid.
This works analogue to the grid() function
Parameters:
Name Type Description
center Vertex The center of the raster.
width number The total width of the raster (width/2 each to the left and to the right).
height number The total height of the raster (height/2 each to the top and to the bottom).
sizeX number The horizontal raster size.
sizeY number The vertical raster size.
color string The CSS color to draw the raster with.
Source:
Returns:
Type
void

square(center, size, color) → {void}

Draw square at the given center, size and with the specified (CSS-) color.

Note that if the x-scale and the y-scale are different the result will be a rectangle rather than a square.
Parameters:
Name Type Description
center Vertex The center of the square.
size Vertex The size of the square.
color string The CSS color to draw the square with.
Source:
Returns:
Type
void

square(center, size, color) → {void}

Draw square at the given center, size and with the specified (CSS-) color.

Note that if the x-scale and the y-scale are different the result will be a rectangle rather than a square.
Parameters:
Name Type Description
center Vertex The center of the square.
size Vertex The size of the square.
color string The CSS color to draw the square with.
Source:
Returns:
Type
void

squareHandle(center, size, color) → {void}

Draw a square handle with the given CSS color.

It is an inherent featur of the handle functions that the drawn elements are not scaled and not distorted. So even if the user zooms in or changes the aspect ratio, the handles will be drawn as even shaped squares.
Parameters:
Name Type Description
center Vertex The center of the square.
size Vertex The x/y-size of the square.
color string The CSS color to draw the square with.
Source:
Returns:
Type
void

squareHandle(center, size, color) → {void}

Draw a square handle with the given CSS color.

It is an inherent featur of the handle functions that the drawn elements are not scaled and not distorted. So even if the user zooms in or changes the aspect ratio, the handles will be drawn as even shaped squares.
Parameters:
Name Type Description
center Vertex The center of the square.
size Vertex The x/y-size of the square.
color string The CSS color to draw the square with.
Source:
Returns:
Type
void

drawutils(context, fillShaped)

new drawutils(context, fillShaped)

The constructor.
Parameters:
Name Type Description
context ContextGL The drawing context.
fillShaped boolean Indicates if the constructed drawutils should fill all drawn shapes (if possible).
Source:

Methods

arrow(zA, zB, color) → {void}

Draw a line and an arrow at the end (zB) of the given line with the specified (CSS-) color.
Parameters:
Name Type Description
zA Vertex The start point of the arrow-line.
zB Vertex The end point of the arrow-line.
color string Any valid CSS color string.
Source:
Returns:
Type
void

arrow(zA, zB, color) → {void}

Draw a line and an arrow at the end (zB) of the given line with the specified (CSS-) color.
Parameters:
Name Type Description
zA Vertex The start point of the arrow-line.
zB Vertex The end point of the arrow-line.
color string Any valid CSS color string.
Source:
Returns:
Type
void

circle(center, radius, color) → {void}

Draw a circle with the specified (CSS-) color and radius.

Note that if the x- and y- scales are different the result will be an ellipse rather than a circle.
Parameters:
Name Type Description
center Vertex The center of the circle.
radius number The radius of the circle.
color string The CSS color to draw the circle with.
Source:
Returns:
Type
void

circle(center, radius, color) → {void}

Draw a circle with the specified (CSS-) color and radius.

Note that if the x- and y- scales are different the result will be an ellipse rather than a circle.
Parameters:
Name Type Description
center Vertex The center of the circle.
radius number The radius of the circle.
color string The CSS color to draw the circle with.
Source:
Returns:
Type
void

circleHandle(center, radius, color) → {void}

Draw a circle handle with the given CSS color.

It is an inherent featur of the handle functions that the drawn elements are not scaled and not distorted. So even if the user zooms in or changes the aspect ratio, the handles will be drawn as even shaped circles.
Parameters:
Name Type Description
center Vertex The center of the circle.
radius number The radius of the circle.
color string The CSS color to draw the circle with.
Source:
Returns:
Type
void

circleHandle(center, radius, color) → {void}

Draw a circle handle with the given CSS color.

It is an inherent featur of the handle functions that the drawn elements are not scaled and not distorted. So even if the user zooms in or changes the aspect ratio, the handles will be drawn as even shaped circles.
Parameters:
Name Type Description
center Vertex The center of the circle.
radius number The radius of the circle.
color string The CSS color to draw the circle with.
Source:
Returns:
Type
void

crosshair(center, radius, color) → {void}

Draw a crosshair with given radius and color at the given position.

Note that the crosshair radius will not be affected by scaling.
Parameters:
Name Type Description
center Vertex The center of the crosshair.
radius number The radius of the crosshair.
color string The CSS color to draw the crosshair with.
Source:
Returns:
Type
void

crosshair(center, radius, color) → {void}

Draw a crosshair with given radius and color at the given position.

Note that the crosshair radius will not be affected by scaling.
Parameters:
Name Type Description
center Vertex The center of the crosshair.
radius number The radius of the crosshair.
color string The CSS color to draw the crosshair with.
Source:
Returns:
Type
void

cubicBezier(startPoint, endPoint, startControlPoint, endControlPoint, color, lineWidth) → {void}

Draw the given (cubic) bézier curve.
Parameters:
Name Type Description
startPoint Vertex The start point of the cubic Bézier curve
endPoint Vertex The end point the cubic Bézier curve.
startControlPoint Vertex The start control point the cubic Bézier curve.
endControlPoint Vertex The end control point the cubic Bézier curve.
color string The CSS color to draw the curve with.
lineWidth number | string (optional) The line width to use.
Source:
Returns:
Type
void

cubicBezier(startPoint, endPoint, startControlPoint, endControlPoint, color) → {void}

Draw the given (cubic) bézier curve.
Parameters:
Name Type Description
startPoint Vertex The start point of the cubic Bézier curve
endPoint Vertex The end point the cubic Bézier curve.
startControlPoint Vertex The start control point the cubic Bézier curve.
endControlPoint Vertex The end control point the cubic Bézier curve.
color string The CSS color to draw the curve with.
Source:
Returns:
Type
void

cubicBezierCurveHandleLines(curve) → {void}

Draw the given handle cubic Bézier curve handle lines. The colors for this are fixed and cannot be specified.
Parameters:
Name Type Description
curve BezierCurve The curve.
Source:
Returns:
Type
void

cubicBezierCurveHandleLines(curve) → {void}

Draw the given handle cubic Bézier curve handle lines. The colors for this are fixed and cannot be specified.
Parameters:
Name Type Description
curve BezierCurve The curve.
Source:
Returns:
Type
void

cubicBezierPath(path, color) → {void}

Draw the given (cubic) Bézier path. The given path must be an array with n*3+1 vertices, where n is the number of curves in the path:
 [ point1, point1_startControl, point2_endControl, point2, point2_startControl, point3_endControl, point3, ... pointN_endControl, pointN ]
Parameters:
Name Type Description
path Array.<Vertex> The cubic bezier path as described above.
color string The CSS colot to draw the path with.
Source:
Returns:
Type
void

cubicBezierPath(path, color) → {void}

Draw the given (cubic) Bézier path. The given path must be an array with n*3+1 vertices, where n is the number of curves in the path:
 [ point1, point1_startControl, point2_endControl, point2, point2_startControl, point3_endControl, point3, ... pointN_endControl, pointN ]
Parameters:
Name Type Description
path Array.<Vertex> The cubic bezier path as described above.
color string The CSS colot to draw the path with.
Source:
Returns:
Type
void

diamondHandle(center, size, color) → {void}

Draw a diamond handle (square rotated by 45°) with the given CSS color. It is an inherent featur of the handle functions that the drawn elements are not scaled and not distorted. So even if the user zooms in or changes the aspect ratio, the handles will be drawn as even shaped diamonds.
Parameters:
Name Type Description
center Vertex The center of the diamond.
size Vertex The x/y-size of the diamond.
color string The CSS color to draw the diamond with.
Source:
Returns:
Type
void

diamondHandle(center, size, color) → {void}

Draw a diamond handle (square rotated by 45°) with the given CSS color. It is an inherent featur of the handle functions that the drawn elements are not scaled and not distorted. So even if the user zooms in or changes the aspect ratio, the handles will be drawn as even shaped diamonds.
Parameters:
Name Type Description
center Vertex The center of the diamond.
size Vertex The x/y-size of the diamond.
color string The CSS color to draw the diamond with.
Source:
Returns:
Type
void

dot(p, color) → {void}

Draw a 1x1 dot with the specified (CSS-) color.
Parameters:
Name Type Description
p Vertex The position to draw the dot at.
color string The CSS color to draw the dot with.
Source:
Returns:
Type
void

dot(p, color) → {void}

Draw a 1x1 dot with the specified (CSS-) color.
Parameters:
Name Type Description
p Vertex The position to draw the dot at.
color string The CSS color to draw the dot with.
Source:
Returns:
Type
void

ellipse(center, radiusX, radiusY, color, lineWidth) → {void}

Draw an ellipse with the specified (CSS-) color and thw two radii.
Parameters:
Name Type Default Description
center Vertex The center of the ellipse.
radiusX number The radius of the ellipse.
radiusY number The radius of the ellipse.
color string The CSS color to draw the ellipse with.
lineWidth number 1 An optional line width param (default is 1).
Source:
Returns:
Type
void

ellipse(center, radiusX, radiusY, color) → {void}

Draw an ellipse with the specified (CSS-) color and thw two radii.
Parameters:
Name Type Description
center Vertex The center of the ellipse.
radiusX number The radius of the ellipse.
radiusY number The radius of the ellipse.
color string The CSS color to draw the ellipse with.
Source:
Returns:
Type
void

grid(center, width, height, sizeX, sizeY, color) → {void}

Draw a grid of horizontal and vertical lines with the given (CSS-) color.
Parameters:
Name Type Description
center Vertex The center of the grid.
width number The total width of the grid (width/2 each to the left and to the right).
height number The total height of the grid (height/2 each to the top and to the bottom).
sizeX number The horizontal grid size.
sizeY number The vertical grid size.
color string The CSS color to draw the grid with.
Source:
Returns:
Type
void

grid(center, width, height, sizeX, sizeY, color) → {void}

Draw a grid of horizontal and vertical lines with the given (CSS-) color.
Parameters:
Name Type Description
center Vertex The center of the grid.
width number The total width of the grid (width/2 each to the left and to the right).
height number The total height of the grid (height/2 each to the top and to the bottom).
sizeX number The horizontal grid size.
sizeY number The vertical grid size.
color string The CSS color to draw the grid with.
Source:
Returns:
Type
void

handle(startPoint, endPoint) → {void}

Draw the given handle and handle point (used to draw interactive Bézier curves). The colors for this are fixed and cannot be specified.
Parameters:
Name Type Description
startPoint Vertex The start of the handle.
endPoint Vertex The end point of the handle.
Source:
Returns:
Type
void

handle(startPoint, endPoint) → {void}

Draw the given handle and handle point (used to draw interactive Bézier curves). The colors for this are fixed and cannot be specified.
Parameters:
Name Type Description
startPoint Vertex The start of the handle.
endPoint Vertex The end point of the handle.
Source:
Returns:
Type
void

handleLine(startPoint, endPoint) → {void}

Draw a handle line (with a light grey).
Parameters:
Name Type Description
startPoint Vertex The start point to draw the handle at.
endPoint Vertex The end point to draw the handle at.
Source:
Returns:
Type
void

handleLine(startPoint, endPoint) → {void}

Draw a handle line (with a light grey).
Parameters:
Name Type Description
startPoint Vertex The start point to draw the handle at.
endPoint Vertex The end point to draw the handle at.
Source:
Returns:
Type
void

image(image, position, size) → {void}

Draw an image at the given position with the given size.

Note: SVG images may have resizing issues at the moment.Draw a line and an arrow at the end (zB) of the given line with the specified (CSS-) color.
Parameters:
Name Type Description
image Image The image object to draw.
position Vertex The position to draw the the upper left corner at.
size Vertex The x/y-size to draw the image with.
Source:
Returns:
Type
void

image(image, position, size) → {void}

Draw an image at the given position with the given size.

Note: SVG images may have resizing issues at the moment.Draw a line and an arrow at the end (zB) of the given line with the specified (CSS-) color.
Parameters:
Name Type Description
image Image The image object to draw.
position Vertex The position to draw the the upper left corner at.
size Vertex The x/y-size to draw the image with.
Source:
Returns:
Type
void

label(text, x, y, rotationopt) → {void}

Draw a non-scaling text label at the given position. Note that these are absolute label positions, they are not affected by offset or scale.
Parameters:
Name Type Attributes Description
text string The text to draw.
x number The x-position to draw the text at.
y number The y-position to draw the text at.
rotation number <optional>
The (aoptional) rotation in radians.
Source:
Returns:
Type
void

label(text, x, y, rotationopt) → {void}

Draw a non-scaling text label at the given position.
Parameters:
Name Type Attributes Description
text string The text to draw.
x number The x-position to draw the text at.
y number The y-position to draw the text at.
rotation number <optional>
The (aoptional) rotation in radians.
Source:
Returns:
Type
void

line(zA, zB, color, lineWidth?) → {void}

Draw the line between the given two points with the specified (CSS-) color.
Parameters:
Name Type Description
zA Vertex The start point of the line.
zB Vertex The end point of the line.
color string Any valid CSS color string.
lineWidth? number | string [optional] The line's width.
Source:
Returns:
Type
void

line(zA, zB, color) → {void}

Draw the line between the given two points with the specified (CSS-) color.
Parameters:
Name Type Description
zA Vertex The start point of the line.
zB Vertex The end point of the line.
color string Any valid CSS color string.
Source:
Returns:
Type
void

point(p, color) → {void}

Draw the given point with the specified (CSS-) color and radius 3.
Parameters:
Name Type Description
p Vertex The position to draw the point at.
color string The CSS color to draw the point with.
Source:
Returns:
Type
void

point(p, color) → {void}

Draw the given point with the specified (CSS-) color and radius 3.
Parameters:
Name Type Description
p Vertex The position to draw the point at.
color string The CSS color to draw the point with.
Source:
Returns:
Type
void

polygon(polygon, color) → {void}

Draw a polygon.
Parameters:
Name Type Description
polygon Polygon The polygon to draw.
color string The CSS color to draw the polygon with.
Source:
Returns:
Type
void

polygon(polygon, color) → {void}

Draw a polygon.
Parameters:
Name Type Description
polygon Polygon The polygon to draw.
color string The CSS color to draw the polygon with.
Source:
Returns:
Type
void

polyline(vertices, isOpen, color, lineWidth) → {void}

Draw a polygon line (alternative function to the polygon).
Parameters:
Name Type Description
vertices Array.<Vertex> The polygon vertices to draw.
isOpen boolan If true the polyline will not be closed at its end.
color string The CSS color to draw the polygon with.
lineWidth number The line width (default is 1.0);
Source:
Returns:
Type
void

polyline(vertices, isOpen, color) → {void}

Draw a polygon line (alternative function to the polygon).
Parameters:
Name Type Description
vertices Array.<Vertex> The polygon vertices to draw.
isOpen boolan If true the polyline will not be closed at its end.
color string The CSS color to draw the polygon with.
Source:
Returns:
Type
void

quadraticBezier(startPoint, controlPoint, endPoint, color, lineWidth) → {void}

Draw the given (quadratic) bézier curve.
Parameters:
Name Type Description
startPoint Vertex The start point of the cubic Bézier curve
controlPoint Vertex The control point the cubic Bézier curve.
endPoint Vertex The end control point the cubic Bézier curve.
color string The CSS color to draw the curve with.
lineWidth number | string (optional) The line width to use.
Source:
Returns:
Type
void

raster(center, width, height, sizeX, sizeY, color) → {void}

Draw a raster of crosshairs in the given grid.
This works analogue to the grid() function
Parameters:
Name Type Description
center Vertex The center of the raster.
width number The total width of the raster (width/2 each to the left and to the right).
height number The total height of the raster (height/2 each to the top and to the bottom).
sizeX number The horizontal raster size.
sizeY number The vertical raster size.
color string The CSS color to draw the raster with.
Source:
Returns:
Type
void

raster(center, width, height, sizeX, sizeY, color) → {void}

Draw a raster of crosshairs in the given grid.
This works analogue to the grid() function
Parameters:
Name Type Description
center Vertex The center of the raster.
width number The total width of the raster (width/2 each to the left and to the right).
height number The total height of the raster (height/2 each to the top and to the bottom).
sizeX number The horizontal raster size.
sizeY number The vertical raster size.
color string The CSS color to draw the raster with.
Source:
Returns:
Type
void

square(center, size, color) → {void}

Draw square at the given center, size and with the specified (CSS-) color.

Note that if the x-scale and the y-scale are different the result will be a rectangle rather than a square.
Parameters:
Name Type Description
center Vertex The center of the square.
size Vertex The size of the square.
color string The CSS color to draw the square with.
Source:
Returns:
Type
void

square(center, size, color) → {void}

Draw square at the given center, size and with the specified (CSS-) color.

Note that if the x-scale and the y-scale are different the result will be a rectangle rather than a square.
Parameters:
Name Type Description
center Vertex The center of the square.
size Vertex The size of the square.
color string The CSS color to draw the square with.
Source:
Returns:
Type
void

squareHandle(center, size, color) → {void}

Draw a square handle with the given CSS color.

It is an inherent featur of the handle functions that the drawn elements are not scaled and not distorted. So even if the user zooms in or changes the aspect ratio, the handles will be drawn as even shaped squares.
Parameters:
Name Type Description
center Vertex The center of the square.
size Vertex The x/y-size of the square.
color string The CSS color to draw the square with.
Source:
Returns:
Type
void

squareHandle(center, size, color) → {void}

Draw a square handle with the given CSS color.

It is an inherent featur of the handle functions that the drawn elements are not scaled and not distorted. So even if the user zooms in or changes the aspect ratio, the handles will be drawn as even shaped squares.
Parameters:
Name Type Description
center Vertex The center of the square.
size Vertex The x/y-size of the square.
color string The CSS color to draw the square with.
Source:
Returns:
Type
void