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.
Create a new CanvasForm. You may also use CanvasSpace.getForm() to get the default form.
an instance of CanvasSpace
Get the rendering context of canvas to perform other canvas functions.
get the CanvasSpace instance that this form is associated with
Get the current font in use in this form.
VisualForm.currentFont in src/Form.tsCheck whether this form currently has fill style.
VisualForm.filled in src/Form.tsget whether the Form has received the Space's rendering context.
Form.ready in src/Form.tsCheck whether this form currently has stroke style.
VisualForm.stroked in src/Form.tsSet text alignment and baseline (eg, vertical-align).
HTML canvas' textAlign option: "left", "right", "center", "start", or "end"
HTML canvas' textBaseline option: "top", "hanging", "middle", "alphabetic", "ideographic", "bottom". For convenience, you can also use "center" (same as "middle"), and "baseline" (same as "alphabetic")
Set current alpha value.
alpha value between 0 and 1
form.alpha(0.6)
VisualForm.alpha in src/Canvas.tsA convenient function to apply fill and/or stroke after custom drawings using canvas context (eg, form.ctx.ellipse(...)).
You don't need to call this function if you're using Pts' drawing functions like form.point or form.rect
apply fill when set to true
apply stroke when set to true
optionally set a stroke width
form.ctx.beginPath(); form.ctx.ellipse(...); form.applyFillStroke();
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.
VisualForm.arc in src/Canvas.tsA 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.
Draw a circle. See also Circle.fromCenter
usually a Group or an Iterable
VisualForm.circle in src/Canvas.tsA static function to draw a circle.
canvas rendering context
center position of the circle
radius of the circle
Create a clipping mask from the current path. See MDN documentation for details.
Set composite operation (also known as blend mode). You can also call this function without parameters to get back to default 'source-over' mode. See MDN documentation for the full list of operations you can use.
a composite operation such as 'lighten', 'multiply', 'overlay', and 'color-burn'.
Activate dashed stroke and set dash style. You can customize the segments and offset.
Dash segments. Defaults to true which corresponds to [5, 5]. Pass false to deactivate dashes. (See canvas documentation)
Dash offset. Defaults to 0. (See canvas documentation
form.dash(), form.dash([5, 10]), form.dash([5, 5], 5), form.dash(false)
Draw an ellipse.
center position
radius [x, y] of the ellipse
rotation of the ellipse in radian. Default is 0.
start angle of the ellipse. Default is 0.
end angle of the ellipse. Default is 2 PI.
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 an ellipse.
canvas rendering context
center position
radius [x, y] of the ellipse
rotation of the ellipse in radian. Default is 0.
start angle of the ellipse. Default is 0.
end angle of the ellipse. Default is 2 PI.
an optional boolean value to specify if it should be drawn clockwise (false) or counter-clockwise (true). Default is clockwise.
Set current fill style. Provide a valid color string such as "#FFF" or "rgba(255,0,100,0.5)" or false to specify no fill color.
fill color which can be as color, gradient, or pattern. (See canvas documentation)
form.fill("#F90"), form.fill("rgba(0,0,0,.5"), form.fill(false)
VisualForm.fill in src/Canvas.tsSet 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"
form.font( myFont ), form.font(14, "bold")
VisualForm.font in src/Canvas.tsSet whether to use html canvas' measureText function, 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
This function takes an array of gradient colors, and returns a function to define the areas of the gradient fill. See demo code in CanvasForm.gradient.
an array of gradient stops. This can be an array of colors ["#f00", "#0f0", ...] for evenly distributed gradient, or an array of [stop, color] like [[0.1, "#f00"], [0.7, "#0f0"]]
a function that takes 1 or 2 Group as parameters. Use a single Group to specify a rectangular area for linear gradient, or use 2 Groups to specify 2 Circles for radial gradient.
c1 = Circle.fromCenter(...); grad = form.gradient(["#f00", "#00f"]); form.fill( grad( c1, c2 ) ).circle( c1 )
Draw an image.
a target area to place the image. Either a PtLike specifying a position, or a Group or an Iterable
either an Img instance or an CanvasImageSource instance (eg the image from <img>, <video> or <canvas>)
optionally a Group or an Iterable
A static function to draw an image.
canvas rendering context
a target area to place the image. Either a Pt or numeric array specifying a position, or a Group or an Iterable
either an Img instance or an CanvasImageSource instance (eg the image from <img>, <video> or <canvas>)
optionally a Group or an Iterable
Draw ImageData on canvas using ImageData
a target area to place the image. Either a Pt or numeric array specifying a position, or a Group or an Iterable
an ImageData object
A static function to draw ImageData on canvas
canvas rendering context
a target area to place the image. Either a Pt or numeric array specifying a position, or a Group or an Iterable
an ImageData object
Draw a line or polyline.
a Group or an Iterable
VisualForm.line in src/Canvas.tsA static function to draw a line or polyline.
canvas rendering context
a Group or an Iterable
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 Group or an Iterable
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.
form.point( p ), form.point( p, 10, "circle" )
VisualForm.point in src/Canvas.tsA static function to draw a point.
canvas rendering context
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.
form.point( p ), form.point( p, 10, "circle" )
Draw a polygon.
a Group or an Iterable
VisualForm.polygon in src/Canvas.tsA static function to draw a polygon.
canvas rendering context
a Group or an Iterable
Draw a rectangle.
a Group or an Iterable
VisualForm.rect in src/Canvas.tsA static function to draw a rectangle.
canvas rendering context
a Group or an Iterable
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.
VisualForm.reset in src/Canvas.tsDraw a square, given a center and its half-size.
center Pt
half-size
A static function to draw a square.
canvas rendering context
center position of the square
half size of the square
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".
form.stroke("#F90"), form.stroke("rgba(0,0,0,.5"), form.stroke(false), form.stroke("#000", 0.5, 'round', 'square')
VisualForm.stroke in src/Canvas.tsDraw text on canvas.
VisualForm.text in src/Canvas.tsA static function to draw text.
canvas rendering context
Fit a single-line text in a rectangular box.
a rectangle box defined by a Group or an Iterable
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.
Draw multiple circles at once.
an array of Groups that defines multiple circles
VisualForm.circles in src/Form.tsSet current fill style and remove stroke style. (not implemented here -- to be implemented in subclasses).
fill color as string or false to specify transparent.
VisualForm.fillOnly in src/Form.tsDraw multiple lines at once.
An array of Groups of Pts
VisualForm.lines in src/Form.tsDraw 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.
VisualForm.points in src/Form.tsDraw multiple polygons at once.
An array of Groups of Pts
VisualForm.polygons in src/Form.tsDraw multiple rectangles at once.
An array of Groups of Pts
VisualForm.rects in src/Form.tsDraw multiple squares at once.
an array of Groups that defines multiple circles
VisualForm.squares in src/Form.tsSet stroke style and remove fill style. (not implemented here -- to be implemented in subclasses).
stroke color as string or false to specify transparent.
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".
VisualForm.strokeOnly in src/Form.ts