Class: CanvasHelper

Core.Annotations. CanvasHelper


new CanvasHelper(canvas)

A wrapper helper for drawing to HTML canvases
Parameters:
Name Type Description
canvas HTMLCanvasElement | CanvasRenderingContext2D The canvas or canvas context to draw to

Methods


clear()

Clears the canvas
Returns:
The current instance
Type
CanvasHelper

drawCircle(rect [, drawingParameters])

Draws a circle in the provided rectangle on the canvas
Parameters:
Name Type Argument Description
rect Core.Math.Rect The bounding rectangle for the circle
drawingParameters Core.Annotations.CanvasHelper.ShapeDrawingParameters <optional>
Additional shape drawing parameters. Values are acceptable HTML canvas values
Returns:
The current instance
Type
CanvasHelper

drawCircleXY(cx, cy, radius [, drawingParameters])

Draws a circle using a center point and radius
Parameters:
Name Type Argument Description
cx number The x-coordinate of the circles center
cy number The rect where the circle will be drawn
radius number Circle radius
drawingParameters Core.Annotations.CanvasHelper.ShapeDrawingParameters <optional>
Additional shape drawing parameters. Values are acceptable HTML canvas values
Returns:
The current instance
Type
CanvasHelper

drawClouds(annot, points [, drawingParameters])

Draws a cloud shape provided by the points on the canvas
Parameters:
Name Type Argument Description
annot Core.Annotations.Annotation The annotation being drawn
points Array.<Core.Math.Point> Points describing the cloud path
drawingParameters Core.Annotations.CanvasHelper.PolyPointDrawingParameters <optional>
Polygon drawing parameters
Returns:
The current instance
Type
CanvasHelper

drawLine(start, end [, drawingParameters])

Draws a line between two points
Parameters:
Name Type Argument Description
start Core.Math.Point The starting point
end Core.Math.Point The ending point
drawingParameters Core.Annotations.CanvasHelper.LineDrawingParameters <optional>
Line drawing parameters
Returns:
The current instance
Type
CanvasHelper

drawLineXY(sx, sy, dx, dy [, drawingParameters])

Draws a line using two points on the canvas
Parameters:
Name Type Argument Description
sx number The start x-coordinate
sy number The start y-coordinate
dx number The end x-coordinate
dy number The end y-coordinate
drawingParameters Core.Annotations.CanvasHelper.LineDrawingParameters <optional>
Line drawing parameters
Returns:
The current instance
Type
CanvasHelper

drawPolygon(points [, drawingParameters])

Draws a shape from a list of points
Parameters:
Name Type Argument Description
points Array.<Core.Math.Point> An array of points representing a shape
drawingParameters Core.Annotations.CanvasHelper.PolyPointDrawingParameters <optional>
Polygon drawing parameters
Returns:
The current instance
Type
CanvasHelper

drawRectangle(rect [, drawingParameters])

Draws a rectangle
Parameters:
Name Type Argument Description
rect Core.Math.Rect The rectangle to draw
drawingParameters Core.Annotations.CanvasHelper.ShapeDrawingParameters <optional>
Additional shape drawing parameters. Values are acceptable HTML canvas values
Returns:
The current instance
Type
CanvasHelper

drawText(text, x, y [, drawingParameters])

Draws text at the provided location
Parameters:
Name Type Argument Description
text string The text to be drawn
x number The x-coordinate
y number The y-coordinate
drawingParameters Core.Annotations.CanvasHelper.TextDrawingParameters <optional>
Additional text drawing parameters. Values are acceptable HTML canvas values
Returns:
The current instance
Type
CanvasHelper

measureText(text [, options])

Measures the width of the text using the current canvas context
Parameters:
Name Type Argument Description
text string The text to measure
options Core.Annotations.CanvasHelper.TextMeasureOptions <optional>
Text measurement options
Returns:
The measured text metrics
Type
TextMetrics

Type Definitions


DrawingParameters

Common drawing parameters shared by all draw operations.
Type:
  • Object
Properties:
Name Type Argument Default Description
opacity number <optional>
1 Opacity in the range 0-1
borderStyle string <optional>
'solid' Border style ('solid' or 'dash')
borderWidth number <optional>
Stroke width in canvas units
dashes Array.<number> <optional>
[3] An arrray of numbers that specify distances to alternately draw a line and a gap. Ex. [4, 3] means a line of 4 units followed by a gap of 3 units
transform Core.Math.Matrix <optional>
Matrix applied before drawing
isStateful boolean <optional>
true Whether to save and restore the canvas state around the draw
forceFill boolean <optional>
false Force a fill even if no fillColor is provided (uses existing context fillStyle)
forceStroke boolean <optional>
false Force a stroke even if no stroke/border color is provided (uses existing context strokeStyle)

LineDrawingParameters

Additional line drawing parameters
Type:
  • Object
Properties:
Name Type Argument Default Description
color Core.Annotations.Color <optional>
The line color
borderStyle string <optional>
'solid' Either 'solid' or 'dash'
borderWidth number <optional>
The border width
dashes Array.<number> <optional>
[3] An arrray of numbers that specify distances to alternately draw a line and a gap. Ex. [4, 3] means a line of 4 units followed by a gap of 3 units
transform Core.Math.Matrix <optional>
Drawing transformation
isStateful boolean <optional>
true Whether to undo canvas context changes after rendering
forceFill boolean <optional>
false Whether to fill the shape regardless of whether a fill color is passed. This would use the currently set fillStyle on the canvas context
forceStroke boolean <optional>
false Whether to stroke the shape regardless of whether a stroke color is passed. This would use the currently set strokeStyle on the canvas context
opacity number <optional>
1 Opacity in the range 0–1

PolyPointDrawingParameters

Additional drawing parameters for polygon / polyline operations
Type:
  • Object
Properties:
Name Type Argument Default Description
fillColor Core.Annotations.Color <optional>
Fill color
borderColor Core.Annotations.Color <optional>
Border or stroke color
borderStyle string <optional>
'solid' Either 'solid' or 'dash'
borderWidth number <optional>
Border width
dashes Array.<number> <optional>
[3] An arrray of numbers that specify distances to alternately draw a line and a gap. Ex. [4, 3] means a line of 4 units followed by a gap of 3 units
opacity number <optional>
1 Opacity value
closePath boolean <optional>
true Whether automatically close the path between the first and last points
clipPath boolean <optional>
false Whether to clip to the path after creating it
transform Core.Math.Matrix <optional>
Drawing transformation
isStateful boolean <optional>
true Whether to undo canvas context changes after rendering
forceFill boolean <optional>
false Whether to fill the shape regardless of whether a fill color is passed. This would use the currently set fillStyle on the canvas context
forceStroke boolean <optional>
false Whether to stroke the shape regardless of whether a stroke color is passed. This would use the currently set strokeStyle on the canvas context

ShapeDrawingParameters

Drawing parameters for shape operations
Type:
  • Object
Properties:
Name Type Argument Default Description
opacity number <optional>
1 Opacity in the range 0–1
borderStyle string <optional>
'solid' Border style ('solid' or 'dash')
borderWidth number <optional>
Stroke width in canvas units
dashes Array.<number> <optional>
[3] An arrray of numbers that specify distances to alternately draw a line and a gap. Ex. [4, 3] means a line of 4 units followed by a gap of 3 units
transform Core.Math.Matrix <optional>
Matrix applied before drawing
isStateful boolean <optional>
true Whether to save and restore the canvas state around the draw
forceFill boolean <optional>
false Force a fill even if no fillColor is provided
forceStroke boolean <optional>
false Force a stroke even if no stroke/border color is provided
fillColor Core.Annotations.Color <optional>
Fill color
borderColor Core.Annotations.Color <optional>
Stroke color
clipPath boolean <optional>
false Whether to clip to the path after creating it

TextDrawingParameters

Drawing parameters for text operations
Type:
  • Object
Properties:
Name Type Argument Default Description
fillColor Core.Annotations.Color <optional>
Fill color
borderColor Core.Annotations.Color <optional>
Border or stroke color
borderStyle string <optional>
'solid' Either 'solid' or 'dash'
borderWidth number <optional>
Border width
dashes Array.<number> <optional>
[3] An arrray of numbers that specify distances to alternately draw a line and a gap. Ex. [4, 3] means a line of 4 units followed by a gap of 3 units
fontSize number <optional>
10 Font size
fontSizeUnits string <optional>
'pt' Font size units (e.g. 'pt')
fontWeight string <optional>
'normal' Font boldness
fontStyle string <optional>
'normal' Font style
fontFamily string <optional>
'sans-serif' Comma-separated font families
opacity number <optional>
1 Opacity value
transform Core.Math.Matrix <optional>
Drawing transformation
isStateful boolean <optional>
true Whether to undo canvas context changes after rendering
forceFill boolean <optional>
false Whether to fill the shape regardless of whether a fill color is passed. This would use the currently set fillStyle on the canvas context
forceStroke boolean <optional>
false Whether to stroke the shape regardless of whether a stroke color is passed. This would use the currently set strokeStyle on the canvas context
clipPath boolean <optional>
false Whether to clip to the path after creating it (true on rectangles/circles by default)

TextMeasureOptions

Text measurement options
Type:
  • Object
Properties:
Name Type Argument Default Description
fontSize number <optional>
10 Font size numeric portion
fontSizeUnits string <optional>
'pt' Font size units
fontWeight string <optional>
'normal' Font weight
fontStyle string <optional>
'normal' Font style
fontFamily string <optional>
'sans-serif' Comma-separated font families