Drawing

Render lines, text, shapes and images on top of the game.

5 functionssUNC 100%Lynx 0.0.0

The Drawing library renders directly on top of the game window, above every Roblox interface. Drawings are cheap to create and cheap to update every frame, which makes them the right tool for overlays, HUDs and debug visualizations.

Creating drawings

Drawing.new

since 1.0.0

Drawing.new(type: string): Drawing

Creates a new drawing of the given type: "Line", "Text", "Square", "Circle", "Triangle", "Quad" or "Image". New drawings are invisible until you set Visible to true.

Parameters

typestring: The kind of drawing to create.

Returns

Drawing

The new drawing.

Example

local RunService = game:GetService("RunService")

local label = Drawing.new("Text")

label.Position = Vector2.new(16, 16)

label.Size = 18

label.Font = Drawing.Fonts.Monospace

label.Color = Color3.new(1, 1, 1)

label.Outline = true

label.Visible = true

RunService.RenderStepped:Connect(function(dt)

label.Text = string.format("%d FPS", math.round(1 / dt))

end)

Shared properties

Every drawing has these, whatever its type.

Property	Type	Description
`Visible`	`boolean`	Whether the drawing renders. Default `false`.
`ZIndex`	`number`	Draw order. Higher values draw on top. Default `1`.
`Color`	`Color3`	Fill or stroke color.
`Transparency`	`number`	Opacity, from `0` (invisible) to `1` (opaque). Default `1`.

Visible

Typeboolean

Whether the drawing renders. Default false.

ZIndex

Typenumber

Draw order. Higher values draw on top. Default 1.

Color

TypeColor3

Fill or stroke color.

Transparency

Typenumber

Opacity, from 0 (invisible) to 1 (opaque). Default 1.

Call Remove() to destroy a drawing. Setting properties on a removed drawing errors. Destroy() is an alias.

Types

Line

Property	Type	Description
`From`	`Vector2`	Start point, in screen pixels.
`To`	`Vector2`	End point, in screen pixels.
`Thickness`	`number`	Width in pixels. Default `1`.

From

TypeVector2

Start point, in screen pixels.

To

TypeVector2

End point, in screen pixels.

Thickness

Typenumber

Width in pixels. Default 1.

Text

Property	Type	Description
`Text`	`string`	The text to render.
`Position`	`Vector2`	Top-left corner, or the top center when `Center` is `true`.
`Size`	`number`	Font size in pixels.
`Font`	`number`	One of `Drawing.Fonts`: `UI` (0), `System` (1), `Plex` (2) or `Monospace` (3).
`Center`	`boolean`	Center the text horizontally on `Position`.
`Outline`	`boolean`	Draw a 1 px outline around the glyphs.
`OutlineColor`	`Color3`	The outline's color.
`TextBounds`	`Vector2`	The rendered size of the text. Read-only.

Text

Typestring

The text to render.

Position

TypeVector2

Top-left corner, or the top center when Center is true.

Size

Typenumber

Font size in pixels.

Font

Typenumber

One of Drawing.Fonts: UI (0), System (1), Plex (2) or Monospace (3).

Center

Typeboolean

Center the text horizontally on Position.

Outline

Typeboolean

Draw a 1 px outline around the glyphs.

OutlineColor

TypeColor3

The outline's color.

TextBounds

TypeVector2

The rendered size of the text. Read-only.

Square

Property	Type	Description
`Position`	`Vector2`	Top-left corner.
`Size`	`Vector2`	Width and height.
`Thickness`	`number`	Stroke width when not filled.
`Filled`	`boolean`	Fill the shape instead of stroking it.

Position

TypeVector2

Top-left corner.

Size

TypeVector2

Width and height.

Thickness

Typenumber

Stroke width when not filled.

Filled

Typeboolean

Fill the shape instead of stroking it.

Circle

Property	Type	Description
`Position`	`Vector2`	Center point.
`Radius`	`number`	Radius in pixels.
`NumSides`	`number`	Segments used to draw it. More is smoother.
`Thickness`	`number`	Stroke width when not filled.
`Filled`	`boolean`	Fill the shape instead of stroking it.

Position

TypeVector2

Center point.

Radius

Typenumber

Radius in pixels.

NumSides

Typenumber

Segments used to draw it. More is smoother.

Thickness

Typenumber

Stroke width when not filled.

Filled

Typeboolean

Fill the shape instead of stroking it.

Triangle

Property	Type	Description
`PointA` `PointB` `PointC`	`Vector2`	The three corners.
`Thickness`	`number`	Stroke width when not filled.
`Filled`	`boolean`	Fill the shape instead of stroking it.

PointA PointB PointC

TypeVector2

The three corners.

Thickness

Typenumber

Stroke width when not filled.

Filled

Typeboolean

Fill the shape instead of stroking it.

Quad

Property	Type	Description
`PointA` `PointB` `PointC` `PointD`	`Vector2`	The four corners, in order.
`Thickness`	`number`	Stroke width when not filled.
`Filled`	`boolean`	Fill the shape instead of stroking it.

PointA PointB PointC PointD

TypeVector2

The four corners, in order.

Thickness

Typenumber

Stroke width when not filled.

Filled

Typeboolean

Fill the shape instead of stroking it.

Image

Property	Type	Description
`Data`	`string`	Raw PNG, JPEG or BMP bytes, from `readfile` or `request`.
`Position`	`Vector2`	Top-left corner.
`Size`	`Vector2`	Rendered size in pixels.
`Rounding`	`number`	Corner radius in pixels.

Data

Typestring

Raw PNG, JPEG or BMP bytes, from readfile or request.

Position

TypeVector2

Top-left corner.

Size

TypeVector2

Rendered size in pixels.

Rounding

Typenumber

Corner radius in pixels.

local image = Drawing.new("Image")

image.Data = readfile("logo.png")

image.Size = Vector2.new(64, 64)

image.Position = Vector2.new(24, 24)

image.Rounding = 12

image.Visible = true

Utilities

cleardrawcache

since 1.0.0

cleardrawcache(): ()

Removes every drawing, from every script. Handy at the top of a script you re-run often.

Example

cleardrawcache()

isrenderobj

since 1.0.0

isrenderobj(value: any): boolean

Returns whether value is a Drawing object.

Parameters

valueany: The value to check.

Returns

boolean

true for drawings.

Example

local line = Drawing.new("Line")

print(isrenderobj(line)) --> true

print(isrenderobj({})) --> false

getrenderproperty

since 1.0.0

getrenderproperty(drawing: Drawing, property: string): any

Reads a property of drawing by name. Equivalent to drawing[property].

Parameters

drawingDrawing: The drawing to read.
propertystring: The property name.

Returns

any

The property's value.

Example

local circle = Drawing.new("Circle")

print(getrenderproperty(circle, "Visible")) --> false

setrenderproperty

since 1.0.0

setrenderproperty(drawing: Drawing, property: string, value: any): ()

Writes a property of drawing by name. Equivalent to drawing[property] = value.

Parameters

drawingDrawing: The drawing to change.
propertystring: The property name.
valueany: The new value.

Example

local circle = Drawing.new("Circle")

setrenderproperty(circle, "Radius", 24)

setrenderproperty(circle, "Visible", true)

Written for Lynx 0.0.0

Something unclear? Tell us on Discord