Constructor
new Canvas(paint, startPointopt)
Creates a new `Canvas`
Parameters:
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
paint | Paint | The paint to use for rendering | ||
startPoint | Point | <optional> | Point.zero() | The starting point of the path |
Example
// Create a new canvas, with a stroke of red
const canvas = new Canvas(new Paint(Color.red));Members
paint :Paint
The paint to use for rendering
Type:
- Paint
(readonly) size :Size
The size of the canvas (The size of the terminal)
Type:
- Size
(readonly) startPoint :Point
The starting point of the path
Type:
- Point
Methods
addPath(path, transformopt)
Adds a subpath to the path, and optionally applies a transform to it
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
path | Path | The subpath to add | |
transform | Matrix | <optional> | The optional transform to apply to the subpath |
arc(center, radius, startAngle, endAngle, anticlockwiseopt)
Draws an arc
Parameters:
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
center | Point | The center-point of the arc | ||
radius | number | The radius of the arc | ||
startAngle | number | The angle to start at | ||
endAngle | number | The angle to end at | ||
anticlockwise | boolean | <optional> | false | Whether or not to draw the arc in an anticlockwise direction |
arcTo(controlPoint1, controlPoint2, radius)
Draws an arc through two controls points
Parameters:
| Name | Type | Description |
|---|---|---|
controlPoint1 | Point | The first control point |
controlPoint2 | Point | The second control point |
radius | number | The radius of the arc |
beginPath(paintopt) → {Canvas}
Creates a new subpath at the current point
Parameters:
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
paint | Paint | <optional> | this.paint | The paint to use for the subpath |
Returns:
The subpath
- Type:
- Canvas
bezierCurveTo(controlPoint1, controlPoint2, endPoint)
Draws a cubic bezier curve from the current point to the specified point
Parameters:
| Name | Type | Description |
|---|---|---|
controlPoint1 | Point | The first control point |
controlPoint2 | Point | The second control point |
endPoint | Point | The end point |
clear()
Without resetting the operations, clears the canvas
clearRect(start, size)
Clears a rectangle at the specified point in the screen
Parameters:
| Name | Type | Description |
|---|---|---|
start | Point | The top left corner of the rectangle |
size | Size | The size of the rectangle |
clip(path)
Clears a path out of the current path (like a mask)
Parameters:
| Name | Type | Description |
|---|---|---|
path | Canvas | The path to clip to |
close()
Closes the last opened subpath, or closes the path if no subpaths are open
draw(clearopt)
Draws the current canvas to the terminal
Parameters:
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
clear | boolean | <optional> | true | Whether or not to clear the screen before rendering |
ellipse(center, radiusX, radiusY, rotation, startAngle, endAngle)
Draws an ellipse
Parameters:
| Name | Type | Description |
|---|---|---|
center | Point | The center of the ellipse |
radiusX | number | The radius of the ellipse on the x axis |
radiusY | number | The radius of the ellipse on the y axis |
rotation | number | The rotation of the ellipse (in radians) |
startAngle | number | The start angle of the ellipse (in radians) |
endAngle | number | The end angle of the ellipse (in radians) |
getBounds() → {Array.<Point>}
Gets the bounds of the path, hoping that the path is closed
Returns:
The points that make up the path bounds
- Type:
- Array.<Point>
isPointInPath(point) → {boolean}
Checks if the specified point is in the path
Parameters:
| Name | Type | Description |
|---|---|---|
point | Point | The point to check |
Returns:
Whether or not the point is in the path
- Type:
- boolean
isPointInStroke(point, start, end) → {boolean}
Determines if the specified point is in the stroke
Parameters:
| Name | Type | Description |
|---|---|---|
point | Point | The point to check |
start | Point | The start point of the line |
end | Point | The end point of the line |
Returns:
Whether or not the point is in the stroke
- Type:
- boolean
lineTo(point)
Draws a line from the current point to the specified point
Parameters:
| Name | Type | Description |
|---|---|---|
point | Point | The point to draw a line to |
quadraticCurveTo(controlPoint, endPoint)
Draws a quadratic bezier curve from the current point to the specified point
Parameters:
| Name | Type | Description |
|---|---|---|
controlPoint | Point | The control point |
endPoint | Point | The end point |
rect(startingPoint, size)
Draws a rectangle
Parameters:
| Name | Type | Description |
|---|---|---|
startingPoint | Point | The starting point of the rectangle (top left) |
size | Size | The size of the rectangle |
reset(start)
Resets the path, including all the operations
Parameters:
| Name | Type | Description |
|---|---|---|
start | Point | The new starting point |
roundRect(startingPoint, size, radii)
Makes a rounded rectangle
Parameters:
| Name | Type | Description |
|---|---|---|
startingPoint | Point | The starting point |
size | Size | The size of the rectangle |
radii | Array.<number> | | The radii of the corners. If it is a number, or number[1], it will be applied to all corners. If it is a number[2], the first element will apply to the top left and bottom right corners, and the second element will apply to the top right and bottom left corners. If it is a number[4], then the array will be applied to the top left, top right, bottom right, and bottom left corners, respectively. |
subpathAt(point) → {Canvas}
Moves the current point to the specified point
Parameters:
| Name | Type | Description |
|---|---|---|
point | Point | The point to move to |
Returns:
- Type:
- Canvas
transform(matrix)
Transforms all the points in the path by the specified matrix
Parameters:
| Name | Type | Description |
|---|---|---|
matrix | Matrix | The matrix to transform the path by |
translate(x, y)
Translates all the points in the path by the specified amount
Parameters:
| Name | Type | Description |
|---|---|---|
x | number | The x value to translate by |
y | number | The y value to translate by |