Graphics Component Reference
The Graphics component provides a series of drawing functions that reference the Web canvas's drawing APIs.
Select a node in the Node Tree panel, and then click the Add Component button below the Properties panel and select Graphics from Renderer Component. Then you can add the Graphics component to the node.
Graphics Properties
| Property | Explanation |
|---|---|
| lineWidth | Current line width |
| lineJoin | lineJoin determines how two connecting segments (of lines, arcs or curves) with non-zero lengths in a shape are joined together |
| lineCap | lineCap determines how the end points of every line are drawn |
| strokeColor | Stroke color |
| fillColor | Fill color |
| miterLimit | Sets the miter limit ratio |
Graphics API
Path
| Function | Explanation |
|---|---|
| moveTo (x, y) | Move the render cursor to a specified point in the canvas without creating lines. |
| lineTo (x, y) | Adds a straight line to the path |
| bezierCurveTo (c1x, c1y, c2x, c2y, x, y) | Adds a cubic Bézier curve to the path |
| quadraticCurveTo (cx, cy, x, y) | Adds a quadratic Bézier curve to the path |
| arc (cx, cy, r, a0, a1, counterclockwise) | Adds an arc to the path which is centered at (cx, cy) position with radius r starting at startAngle and ending at endAngle going in the given direction by counterclockwise (defaulting to false). |
| ellipse (cx, cy, rx, ry) | Adds an ellipse to the path |
| circle (cx, cy, r) | Adds a circle to the path |
| rect (x, y, w, h) | Adds a rectangle to the path |
| close () | Adds an round corner rectangle to the path |
| stroke () | Draws a filled rectangle |
| fill () | Erasing any previously drawn content |
| clear () | Causes the point of the pen to move back to the start of the current path. It tries to add a straight line from the current point to the start |