Class: drawutils

drawutils(context, fillShaped)

new drawutils(context, fillShaped)

The constructor.

Parameters:

Name	Type	Description
`context`	anvasRenderingContext2D	The drawing context.
`fillShaped`	boolean	Indicates if the constructed drawutils should fill all drawn shapes (if possible).

Source:

draw.js, line 46

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:

draw.js, line 91

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:

drawgl.js, line 126

Returns:

Type: void

circle(center, radius, color, lineWidth) → {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.
`lineWidth`	number	The line width (optional, default=1).

Source:

draw.js, line 367

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:

drawgl.js, line 281

Returns:

Type: void

circleArc(center, radius, startAngle, endAngle, color) → {void}

Draw a circular arc (section of a circle) with the given CSS color.

Parameters:

Name	Type	Description
`center`	Vertex	The center of the circle.
`radius`	number	The radius of the circle.
`startAngle`	number	The angle to start at.
`endAngle`	number	The angle to end at.
`color`	string	The CSS color to draw the circle with.

Source:

draw.js, line 389

Returns:

Type: void

circleArc(center, radius, startAngle, endAngle, color) → {void}

Draw a circular arc (section of a circle) with the given CSS color.

Parameters:

Name	Type	Description
`center`	Vertex	The center of the circle.
`radius`	number	The radius of the circle.
`startAngle`	number	The angle to start at.
`endAngle`	number	The angle to end at.
`color`	string	The CSS color to draw the circle with.

Source:

drawgl.js, line 298

Returns:

Type: void

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

Draw a circle handle with the given CSS color.

It is an inherent feature 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:

draw.js, line 575

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:

drawgl.js, line 424

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`	XYCoords	The center of the crosshair.
`radius`	number	The radius of the crosshair.
`color`	string	The CSS color to draw the crosshair with.

Source:

draw.js, line 599

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`	XYCoords	The center of the crosshair.
`radius`	number	The radius of the crosshair.
`color`	string	The CSS color to draw the crosshair with.

Source:

drawgl.js, line 443

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:

draw.js, line 188

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:

drawgl.js, line 173

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`	CubicBezierCurve	The curve.

Source:

draw.js, line 295

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`	CubicBezierCurve	The curve.

Source:

drawgl.js, line 224

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:

draw.js, line 242

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:

drawgl.js, line 190

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 feature 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:

draw.js, line 526

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:

drawgl.js, line 386

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:

draw.js, line 327

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:

drawgl.js, line 253

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:

draw.js, line 410

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:

drawgl.js, line 315

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:

draw.js, line 453

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:

drawgl.js, line 348

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:

draw.js, line 276

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:

drawgl.js, line 208

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:

draw.js, line 312

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:

drawgl.js, line 239

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:

draw.js, line 119

Returns:

Type: void

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

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:

drawgl.js, line 141

Returns:

Type: void

label(text, x, y, rotationopt, coloropt) → {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 (optional) rotation in radians (default=0).
`color`	string	<optional>	The color to render the text with (default=black).

Source:

draw.js, line 687

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:

drawgl.js, line 528

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:

draw.js, line 68

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:

drawgl.js, line 75

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:

draw.js, line 348

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:

drawgl.js, line 267

Returns:

Type: void

polygon(polygon, color, lineWidth) → {void}

Draw a polygon.

Parameters:

Name	Type	Description
`polygon`	Polygon	The polygon to draw.
`color`	string	The CSS color to draw the polygon with.
`lineWidth`	string	The line width to use.

Source:

draw.js, line 626

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:

drawgl.js, line 460

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:

draw.js, line 641

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:

drawgl.js, line 509

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:

draw.js, line 218

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:

draw.js, line 487

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:

drawgl.js, line 366

Returns:

Type: void

square(center, size, color, lineWidth) → {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.
`lineWidth`	number	The line with to use (optional, default is 1).

Source:

draw.js, line 431

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:

drawgl.js, line 331

Returns:

Type: void

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

Draw a square handle with the given CSS color.

It is an inherent feature 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:

draw.js, line 552

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:

drawgl.js, line 405

Returns:

Type: void

drawutils(context, fillShaped)

new drawutils(context, fillShaped)

The constructor.

Parameters:

Name	Type	Description
`context`	WebGLRenderingContext	The drawing context.
`fillShaped`	boolean	Indicates if the constructed drawutils should fill all drawn shapes (if possible).

Source:

drawgl.js, line 18

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:

draw.js, line 91

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:

drawgl.js, line 126

Returns:

Type: void

circle(center, radius, color, lineWidth) → {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.
`lineWidth`	number	The line width (optional, default=1).

Source:

draw.js, line 367

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:

drawgl.js, line 281

Returns:

Type: void

circleArc(center, radius, startAngle, endAngle, color) → {void}

Draw a circular arc (section of a circle) with the given CSS color.

Parameters:

Name	Type	Description
`center`	Vertex	The center of the circle.
`radius`	number	The radius of the circle.
`startAngle`	number	The angle to start at.
`endAngle`	number	The angle to end at.
`color`	string	The CSS color to draw the circle with.

Source:

draw.js, line 389

Returns:

Type: void

circleArc(center, radius, startAngle, endAngle, color) → {void}

Draw a circular arc (section of a circle) with the given CSS color.

Parameters:

Name	Type	Description
`center`	Vertex	The center of the circle.
`radius`	number	The radius of the circle.
`startAngle`	number	The angle to start at.
`endAngle`	number	The angle to end at.
`color`	string	The CSS color to draw the circle with.

Source:

drawgl.js, line 298

Returns:

Type: void

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

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:

draw.js, line 575

Returns:

Type: void

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

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:

drawgl.js, line 424

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`	XYCoords	The center of the crosshair.
`radius`	number	The radius of the crosshair.
`color`	string	The CSS color to draw the crosshair with.

Source:

draw.js, line 599

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`	XYCoords	The center of the crosshair.
`radius`	number	The radius of the crosshair.
`color`	string	The CSS color to draw the crosshair with.

Source:

drawgl.js, line 443

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:

draw.js, line 188

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:

drawgl.js, line 173

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`	CubicBezierCurve	The curve.

Source:

draw.js, line 295

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`	CubicBezierCurve	The curve.

Source:

drawgl.js, line 224

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:

draw.js, line 242

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:

drawgl.js, line 190

Returns:

Type: void

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

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:

draw.js, line 526

Returns:

Type: void

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

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:

drawgl.js, line 386

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:

draw.js, line 327

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:

drawgl.js, line 253

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:

draw.js, line 410

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:

drawgl.js, line 315

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:

draw.js, line 453

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:

drawgl.js, line 348

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:

draw.js, line 276

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:

drawgl.js, line 208

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:

draw.js, line 312

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:

drawgl.js, line 239

Returns:

Type: void

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

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:

draw.js, line 119

Returns:

Type: void

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

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:

drawgl.js, line 141

Returns:

Type: void

label(text, x, y, rotationopt, coloropt) → {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 (optional) rotation in radians (default=0).
`color`	string	<optional>	The color to render the text with (default=black).

Source:

draw.js, line 687

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:

drawgl.js, line 528

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:

draw.js, line 68

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:

drawgl.js, line 75

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:

draw.js, line 348

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:

drawgl.js, line 267

Returns:

Type: void

polygon(polygon, color, lineWidth) → {void}

Draw a polygon.

Parameters:

Name	Type	Description
`polygon`	Polygon	The polygon to draw.
`color`	string	The CSS color to draw the polygon with.
`lineWidth`	string	The line width to use.

Source:

draw.js, line 626

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:

drawgl.js, line 460

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:

draw.js, line 641

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:

drawgl.js, line 509

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:

draw.js, line 218

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:

draw.js, line 487

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:

drawgl.js, line 366

Returns:

Type: void

square(center, size, color, lineWidth) → {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.
`lineWidth`	number	The line with to use (optional, default is 1).

Source:

draw.js, line 431

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:

drawgl.js, line 331

Returns:

Type: void

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

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:

draw.js, line 552

Returns:

Type: void

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

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:

drawgl.js, line 405

Returns:

Type: void