Create a new CanvasForm. You may also use space.getForm()
to get the default form.
an instance of CanvasSpace
get whether the Form has received the Space's rendering context
get the CanvasSpace instance that this form is associated with
Align text within a rectangle box
a Group that defines a rectangular box
a string that specifies the vertical alignment in the box: "top", "bottom", "middle", "start", "end"
Optional offset from the edge (like padding)
Optional center position
Truncate text to fit width
text to truncate
width to fit
text to indicate overflow such as "...". Default is empty "".
Set text alignment and baseline (eg, vertical-align)
Canvas' textAlign option: "left", "right", "center", "start", or "end"
Canvas' textBaseline option: "top", "hanging", "middle", "alphabetic", "ideographic", "bottom". For convenience, you can also use "center" (same as "middle"), and "baseline" (same as "alphabetic")
Draw an arc.
center position
radius of the arc circle
start angle of the arc
end angle of the arc
an optional boolean value to specify if it should be drawn clockwise (false
) or counter-clockwise (true
). Default is clockwise.
Draw a circle
usually a Group of 2 Pts, but it can also take an array of two numeric arrays [ [position], [size] ]
Draw multiple circles at once
an array of Groups that defines multiple circles
Set current fill style. Provide a valid color string or false
to specify no fill color.
fill color which can be as color, gradient, or pattern. (See canvas documentation)
Set current fill style and without stroke.
fill color which can be as color, gradient, or pattern. (See canvas documentation)
Set the current font
either a number to specify font-size, or a Font
object to specify all font properties
Optional font-weight string such as "bold"
Optional font-style string such as "italic"
Optional line-height number suchas 1.5
Optional font-family such as "Helvetica, sans-serif"
Set whether to use ctx.measureText or a faster but less accurate heuristic function.
true
to use heuristic function, or false
to use ctx.measureText
Get the width of this text. It will return an actual measurement or an estimate based on fontWidthEstimate
setting. Default is an actual measurement using canvas context's measureText.
a string of text contents
Draw a line or polyline
a Group of multiple Pts, or an array of multiple numeric arrays
Draw multiple lines at once
An array of Groups of Pts
A convenient way to draw some text on canvas for logging or debugging. It'll be draw on the top-left of the canvas as an overlay.
text
Fit multi-line text in a rectangular box. Note that this will also set canvas context's textBaseline to "top".
a rectangle box defined by a Group
string of text
line height as a ratio of font size. Default is 1.2.
"top", "middle", or "bottom" to specify vertical alignment inside the box
a boolean to specify whether to crop text when overflowing
Draws a point
a Pt object
radius of the point. Default is 5.
The shape of the point. Defaults to "square", but it can be "circle" or a custom shape function in your own implementation.
Draw multiple points at once
an array of Pt or an array of number arrays
radius of the point. Default is 5.
The shape of the point. Defaults to "square", but it can be "circle" or a custom shape function in your own implementation.
Draw a polygon
a Group of multiple Pts, or an array of multiple numeric arrays
Draw multiple polygons at once
An array of Groups of Pts
Draw a rectangle
usually a Group of 2 Pts specifying the top-left and bottom-right positions. Alternatively it can be an array of numeric arrays.
Draw multiple rectangles at once
An array of Groups of Pts
Render the offscreen canvas's content on the visible canvas
Optional offset on the top-left position when drawing on the visible canvas
Reset the rendering context's common styles to this form's styles. This supports using multiple forms on the same canvas context.
Draw a square, given a center and its half-size
center Pt
half-size
Draw multiple squares at once
an array of Groups that defines multiple circles
Set current stroke style. Provide a valid color string or false
to specify no stroke color.
stroke color which can be as color, gradient, or pattern. (See canvas documentation)
Optional value (can be floating point) to set line width
Optional string to set line joint style. Can be "miter", "bevel", or "round".
Optional string to set line cap style. Can be "butt", "round", or "square".
Set current stroke style and without fill.
stroke color which can be as color, gradient, or pattern. (See canvas documentation
Draw text on canvas
Fit a single-line text in a rectangular box
a rectangle box defined by a Group
string of text
"top", "middle", or "bottom" to specify vertical alignment inside the box
text to indicate overflow such as "...". Default is empty "".
If true
, use the corresponding baseline as verticalAlign. If false
, use the current canvas context's textBaseline setting. Default is true
.
Toggle whether to draw on offscreen canvas (if offscreen is set in CanvasSpace)
if true
, draw on offscreen canvas instead of the visible canvas. Default is true
optionally provide a valid color string to fill a bg color. see CanvasSpace's clearOffscreen
function.
Check number of items in a Group against a required number
A static function to draw an arc.
canvas rendering context
center position
radius of the arc circle
start angle of the arc
end angle of the arc
an optional boolean value to specify if it should be drawn clockwise (false
) or counter-clockwise (true
). Default is clockwise.
A static function to draw a circle
canvas rendering context
center position of the circle
radius of the circle
A static function to draw a line
canvas rendering context
a Group of multiple Pts, or an array of multiple numeric arrays
A static function to draw polygon
canvas rendering context
a Group of multiple Pts, or an array of multiple numeric arrays
A static function to draw a rectangle
canvas rendering context
usually a Group of 2 Pts specifying the top-left and bottom-right positions. Alternatively it can be an array of numeric arrays.
A static function to draw a square
canvas rendering context
center position of the square
half size of the square
A static function to draw text
canvas rendering context
store common styles so that they can be restored to canvas context when using multiple forms. See reset()
.
Generated using TypeDoc
CanvasForm is an implementation of abstract class VisualForm. It provide methods to express Pts on CanvasSpace. You may extend CanvasForm to implement your own expressions for CanvasSpace.