OVERLAY
2D overlay rendering.
Availability: Client-only
Methods
- arc
- arcTo
- beginPath
- bezierCurveTo
- clear
- closePath
- drawCircle
- drawImage
- drawLine
- drawRect
- drawText
- ellipse
- fill
- fillStyle
- getSize
- globalAlpha
- lineDashOffset
- lineJoin
- lineTo
- lineWidth
- measureText
- moveTo
- offset
- quadraticCurveTo
- restore
- save
- scale
- setTransform
- stroke
- strokeRect
- strokeStyle
- strokeText
- transform
- translate
OVERLAY.arc
client
Add a circular arc to the current path
Signature: action(num, num, num, num, num, bool)
Parameters:
| Name | Type | Description |
|---|---|---|
x | num | Center X position |
y | num | Center Y position |
radius | num | Arc radius |
startAngle | num | Start angle in radians |
endAngle | num | End angle in radians |
counterClockwise | bool | Draw counter-clockwise |
GAME.OVERLAY.arc(0, 10, 0, 0, 0, true);
OVERLAY.arcTo
client
Add an arc connecting two points with tangent lines
Signature: action(num, num, num, num, num)
Parameters:
| Name | Type | Description |
|---|---|---|
x1 | num | First control point X |
y1 | num | First control point Y |
x2 | num | Second control point X |
y2 | num | Second control point Y |
radius | num | Arc radius |
GAME.OVERLAY.arcTo(0, 10, 0, 10, 0);
OVERLAY.beginPath
client
Begin a new drawing path
Signature: action()
GAME.OVERLAY.beginPath();
OVERLAY.bezierCurveTo
client
Add a cubic bezier curve to the path
Signature: action(num, num, num, num, num, num)
Parameters:
| Name | Type | Description |
|---|---|---|
cp1x | num | First control point X |
cp1y | num | First control point Y |
cp2x | num | Second control point X |
cp2y | num | Second control point Y |
x | num | End point X |
y | num | End point Y |
GAME.OVERLAY.bezierCurveTo(0, 0, 0, 0, 0, 10);
OVERLAY.clear
client
Clear the entire overlay canvas
Signature: action()
GAME.OVERLAY.clear();
OVERLAY.closePath
client
Close the current drawing path
Signature: action()
GAME.OVERLAY.closePath();
OVERLAY.drawCircle
client
Draw an ellipse on the overlay
Signature: action(num, num, num, num, num, str, num, bool)
Parameters:
| Name | Type | Description |
|---|---|---|
x | num | X position |
y | num | Y position |
w | num | Width (horizontal radius) |
h | num | Height (vertical radius) |
r | num | Rotation angle in degrees |
color | str | Fill color (hex) |
opac | num | Opacity (0-1) |
center | bool | Whether to center the ellipse at the position |
GAME.OVERLAY.drawCircle(0, 10, 5, 5, 255, "#FF0000", 0, true);
OVERLAY.drawImage
client
Draw an image asset on the overlay canvas
Signature: action(num, num, num, num, num, num, num)
Parameters:
| Name | Type | Description |
|---|---|---|
aid | num | Asset ID of the image |
x | num | X position (center) |
y | num | Y position (center) |
w | num | Width |
h | num | Height |
r | num | Rotation angle in degrees |
opac | num | Opacity (0-1) |
GAME.OVERLAY.drawImage("asset_id", 0, 10, 5, 5, 255, 0);
OVERLAY.drawLine
client
Draw a line between two points on the overlay
Signature: action(num, num, num, num, num, str, num)
Parameters:
| Name | Type | Description |
|---|---|---|
x1 | num | Starting X position |
y1 | num | Starting Y position |
x2 | num | Ending X position |
y2 | num | Ending Y position |
thickness | num | Line thickness |
color | str | Line color (hex) |
opac | num | Opacity (0-1) |
GAME.OVERLAY.drawLine(0, 10, 0, 10, 0, "#FF0000", 0);
OVERLAY.drawRect
client
Draw a rectangle on the overlay
Signature: action(num, num, num, num, num, str, num, bool)
Parameters:
| Name | Type | Description |
|---|---|---|
x | num | X position |
y | num | Y position |
w | num | Width |
h | num | Height |
r | num | Rotation angle in degrees |
color | str | Fill color (hex) |
opac | num | Opacity (0-1) |
center | bool | Whether to center the rectangle at the position |
GAME.OVERLAY.drawRect(0, 10, 5, 5, 255, "#FF0000", 0, true);
OVERLAY.drawText
client
Draw text on the overlay canvas
Signature: action(str, num, num, num, num, str, str, num, str)
Parameters:
| Name | Type | Description |
|---|---|---|
text | str | Text content to display |
x | num | X position |
y | num | Y position |
r | num | Rotation angle in degrees |
size | num | Font size in pixels |
align | str | Text alignment (left, center, right) |
color | str | Fill color (hex) |
opac | num | Opacity (0-1) |
font | str | Font family name |
GAME.OVERLAY.drawText("Hello", 0, 10, 255, 0, "value", "#FF0000", 0, "Arial");
OVERLAY.ellipse
client
Add an ellipse to the current path
Signature: action(num, num, num, num, num, num, num, bool)
Parameters:
| Name | Type | Description |
|---|---|---|
x | num | Center X position |
y | num | Center Y position |
radiusX | num | Horizontal radius |
radiusY | num | Vertical radius |
rotation | num | Rotation in radians |
startAngle | num | Start angle in radians |
endAngle | num | End angle in radians |
counterClockwise | bool | Draw counter-clockwise |
GAME.OVERLAY.ellipse(0, 10, 0, 0, 0, 0, 0, true);
OVERLAY.fill
client
Fill the current path with the fill style
Signature: action()
GAME.OVERLAY.fill();
OVERLAY.fillStyle
client
Set the fill color for subsequent fill operations
Signature: action(str)
Parameters:
| Name | Type | Description |
|---|---|---|
color | str | Fill color (hex) |
GAME.OVERLAY.fillStyle("#FF0000");
OVERLAY.getSize
client
Get the current overlay canvas dimensions
Signature: obj action()
Returns: obj - Object with width and height properties
obj size = GAME.OVERLAY.getSize();
OVERLAY.globalAlpha
client
Set the global transparency for all drawing operations
Signature: action(num)
Parameters:
| Name | Type | Description |
|---|---|---|
val | num | Alpha value (0-1) |
GAME.OVERLAY.globalAlpha(100);
OVERLAY.lineDashOffset
client
Set the line dash offset for dashed lines
Signature: action(num)
Parameters:
| Name | Type | Description |
|---|---|---|
offset | num | Dash offset value |
GAME.OVERLAY.lineDashOffset(0);
OVERLAY.lineJoin
client
Set how lines join together (bevel, round, or miter)
Signature: action(str)
Parameters:
| Name | Type | Description |
|---|---|---|
option | str | Join style: 'bevel', 'round', or 'miter' |
GAME.OVERLAY.lineJoin("value");
OVERLAY.lineTo
client
Draw a line from current position to a new position
Signature: action(num, num)
Parameters:
| Name | Type | Description |
|---|---|---|
x | num | Target X position |
y | num | Target Y position |
GAME.OVERLAY.lineTo(0, 10);
OVERLAY.lineWidth
client
Set the line width for stroke operations
Signature: action(num)
Parameters:
| Name | Type | Description |
|---|---|---|
width | num | Line width in pixels |
GAME.OVERLAY.lineWidth(5);
OVERLAY.measureText
client
Measure the width of text without rendering it
Signature: num action(num, str, str)
Parameters:
| Name | Type | Description |
|---|---|---|
size | num | Font size in pixels |
text | str | Text to measure |
font | str | Font family name |
Returns: num - Width of the text in pixels
num result = GAME.OVERLAY.measureText(0, "Hello", "Arial");
OVERLAY.moveTo
client
Move the path cursor to a position without drawing
Signature: action(num, num)
Parameters:
| Name | Type | Description |
|---|---|---|
x | num | X position |
y | num | Y position |
GAME.OVERLAY.moveTo(0, 10);
OVERLAY.offset
client
Offset the canvas drawing origin by translating it
Signature: action(num, num)
Parameters:
| Name | Type | Description |
|---|---|---|
x | num | X offset amount |
y | num | Y offset amount |
GAME.OVERLAY.offset(0, 10);
OVERLAY.quadraticCurveTo
client
Add a quadratic bezier curve to the path
Signature: action(num, num, num, num)
Parameters:
| Name | Type | Description |
|---|---|---|
cpx | num | Control point X |
cpy | num | Control point Y |
x | num | End point X |
y | num | End point Y |
GAME.OVERLAY.quadraticCurveTo(0, 0, 0, 10);
OVERLAY.restore
client
Restore the canvas state from the stack
Signature: action()
GAME.OVERLAY.restore();
OVERLAY.save
client
Save the current canvas state to the stack
Signature: action()
GAME.OVERLAY.save();
OVERLAY.scale
client
Scale the canvas uniformly
Signature: action(num)
Parameters:
| Name | Type | Description |
|---|---|---|
scl | num | Scale factor |
GAME.OVERLAY.scale(1);
OVERLAY.setTransform
client
Reset and set the transformation matrix
Signature: action(num, num, num, num, num, num)
Parameters:
| Name | Type | Description |
|---|---|---|
a | num | Horizontal scaling |
b | num | Horizontal skewing |
c | num | Vertical skewing |
d | num | Vertical scaling |
e | num | Horizontal moving |
f | num | Vertical moving |
GAME.OVERLAY.setTransform(0, 0, 0, 0, 0, 0);
OVERLAY.stroke
client
Stroke (outline) the current path
Signature: action()
GAME.OVERLAY.stroke();
OVERLAY.strokeRect
client
Draw a rectangle outline (stroke only)
Signature: action(num, num, num, num)
Parameters:
| Name | Type | Description |
|---|---|---|
x | num | X position |
y | num | Y position |
width | num | Rectangle width |
height | num | Rectangle height |
GAME.OVERLAY.strokeRect(0, 10, 5, 5);
OVERLAY.strokeStyle
client
Set the stroke color for subsequent stroke operations
Signature: action(str)
Parameters:
| Name | Type | Description |
|---|---|---|
color | str | Stroke color (hex) |
GAME.OVERLAY.strokeStyle("#FF0000");
OVERLAY.strokeText
client
Draw text outline (stroke) at a position
Signature: action(str, num, num, num)
Parameters:
| Name | Type | Description |
|---|---|---|
text | str | Text to draw |
x | num | X position |
y | num | Y position |
maxWidth | num | Maximum width for the text |
GAME.OVERLAY.strokeText("Hello", 0, 10, 0);
OVERLAY.transform
client
Apply a transformation matrix to the canvas
Signature: action(num, num, num, num, num, num)
Parameters:
| Name | Type | Description |
|---|---|---|
a | num | Horizontal scaling |
b | num | Horizontal skewing |
c | num | Vertical skewing |
d | num | Vertical scaling |
e | num | Horizontal moving |
f | num | Vertical moving |
GAME.OVERLAY.transform(0, 0, 0, 0, 0, 0);
OVERLAY.translate
client
Translate (move) the canvas origin
Signature: action(num, num)
Parameters:
| Name | Type | Description |
|---|---|---|
x | num | X translation amount |
y | num | Y translation amount |
GAME.OVERLAY.translate(0, 10);