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 rectCore.Math.Rect The bounding rectangle for the circle drawingParametersCore.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 cxnumber The x-coordinate of the circles center cynumber The rect where the circle will be drawn radiusnumber Circle radius drawingParametersCore.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 annotCore.Annotations.Annotation The annotation being drawn pointsArray.<Core.Math.Point> Points describing the cloud path drawingParametersCore.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 startCore.Math.Point The starting point endCore.Math.Point The ending point drawingParametersCore.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 sxnumber The start x-coordinate synumber The start y-coordinate dxnumber The end x-coordinate dynumber The end y-coordinate drawingParametersCore.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 pointsArray.<Core.Math.Point> An array of points representing a shape drawingParametersCore.Annotations.CanvasHelper.PolyPointDrawingParameters <optional>
Polygon drawing parameters Returns:
The current instance- Type
- CanvasHelper
-
drawRectangle(rect [, drawingParameters])
-
Draws a rectangle
Parameters:
Name Type Argument Description rectCore.Math.Rect The rectangle to draw drawingParametersCore.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 textstring The text to be drawn xnumber The x-coordinate ynumber The y-coordinate drawingParametersCore.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 textstring The text to measure optionsCore.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 opacitynumber <optional>
1 Opacity in the range 0-1 borderStylestring <optional>
'solid' Border style ('solid' or 'dash') borderWidthnumber <optional>
Stroke width in canvas units dashesArray.<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 transformCore.Math.Matrix <optional>
Matrix applied before drawing isStatefulboolean <optional>
true Whether to save and restore the canvas state around the draw forceFillboolean <optional>
false Force a fill even if no fillColor is provided (uses existing context fillStyle) forceStrokeboolean <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 colorCore.Annotations.Color <optional>
The line color borderStylestring <optional>
'solid' Either 'solid' or 'dash' borderWidthnumber <optional>
The border width dashesArray.<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 transformCore.Math.Matrix <optional>
Drawing transformation isStatefulboolean <optional>
true Whether to undo canvas context changes after rendering forceFillboolean <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 forceStrokeboolean <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 opacitynumber <optional>
1 Opacity in the range 0–1 -
PolyPointDrawingParameters
-
Additional drawing parameters for polygon / polyline operations
Type:
- Object
Properties:
Name Type Argument Default Description fillColorCore.Annotations.Color <optional>
Fill color borderColorCore.Annotations.Color <optional>
Border or stroke color borderStylestring <optional>
'solid' Either 'solid' or 'dash' borderWidthnumber <optional>
Border width dashesArray.<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 opacitynumber <optional>
1 Opacity value closePathboolean <optional>
true Whether automatically close the path between the first and last points clipPathboolean <optional>
false Whether to clip to the path after creating it transformCore.Math.Matrix <optional>
Drawing transformation isStatefulboolean <optional>
true Whether to undo canvas context changes after rendering forceFillboolean <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 forceStrokeboolean <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 opacitynumber <optional>
1 Opacity in the range 0–1 borderStylestring <optional>
'solid' Border style ('solid' or 'dash') borderWidthnumber <optional>
Stroke width in canvas units dashesArray.<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 transformCore.Math.Matrix <optional>
Matrix applied before drawing isStatefulboolean <optional>
true Whether to save and restore the canvas state around the draw forceFillboolean <optional>
false Force a fill even if no fillColor is provided forceStrokeboolean <optional>
false Force a stroke even if no stroke/border color is provided fillColorCore.Annotations.Color <optional>
Fill color borderColorCore.Annotations.Color <optional>
Stroke color clipPathboolean <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 fillColorCore.Annotations.Color <optional>
Fill color borderColorCore.Annotations.Color <optional>
Border or stroke color borderStylestring <optional>
'solid' Either 'solid' or 'dash' borderWidthnumber <optional>
Border width dashesArray.<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 fontSizenumber <optional>
10 Font size fontSizeUnitsstring <optional>
'pt' Font size units (e.g. 'pt') fontWeightstring <optional>
'normal' Font boldness fontStylestring <optional>
'normal' Font style fontFamilystring <optional>
'sans-serif' Comma-separated font families opacitynumber <optional>
1 Opacity value transformCore.Math.Matrix <optional>
Drawing transformation isStatefulboolean <optional>
true Whether to undo canvas context changes after rendering forceFillboolean <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 forceStrokeboolean <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 clipPathboolean <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 fontSizenumber <optional>
10 Font size numeric portion fontSizeUnitsstring <optional>
'pt' Font size units fontWeightstring <optional>
'normal' Font weight fontStylestring <optional>
'normal' Font style fontFamilystring <optional>
'sans-serif' Comma-separated font families