Skip to main content
Version: latest - a1.58.x ⚖️

🖼️ Canvas

Canvas is an entity which you can draw onto it.

💂Authority
This class can only be spawned on 🟧 Client side.
🧑‍💻API Source
The methods, properties and events descriptions from this page are defined in our GitHub API Repository!

🎒 Examples

Client/Index.lua
-- Spawns a Canvas
local my_canvas = Canvas(
true,
Color.TRANSPARENT,
0,
true
)

-- Subscribes for Update, we can only Draw inside this event
my_canvas:Subscribe("Update", function(self, width, height)
-- Draws a Text in the middle of the screen
self:DrawText("Hello World!", Vector2D(width / 2, height / 2))

-- Draws a red line Horizontally
self:DrawLine(Vector2D(0, height / 2), Vector2D(width, height / 2), 10, Color.RED)
end)

-- Forces the canvas to repaint, this will make it trigger the Update event
my_canvas:Repaint()

-- Applies the Canvas material into a Prop
any_prop:SetMaterialFromCanvas(my_canvas)
tip

You can use the output Texture from a Canvas with :SetMaterialFromCanvas() method!

🛠 Constructors

Default Constructor

local my_canvas = Canvas(is_visible?, clear_color?, auto_repaint_rate?, should_clear_before_update?, auto_resize?, width?, height?, screen_position?)
TypeNameDefaultDescription
booleanis_visibletrueWhether to draw it on screen
Colorclear_colorColor.TRANSPARENTColor to clear with (background color)
floatauto_repaint_rate-1Rate to auto repaint (call Update event), pass 0 for every frame, -1 to disable
booleanshould_clear_before_updatetrueWhether to clear with Clear Color before updates
booleanauto_resizetrueAuto resize with screen's size
integerwidth0If not using auto_resize
integerheight0If not using auto_resize
Vector2Dscreen_positionVector2D(0, 0)If not using auto_resize, offset when drawing to screen

🗿 Static Functions

This class doesn't have own static functions.

🦠 Functions

ReturnsNameDescription
ClearClear the Canvas with a specific Color
DrawBoxDraws an unfilled box on the Canvas
DrawLineDraws a line on the Canvas
DrawMaterialDraws a Material on the Canvas
DrawMaterialFromSceneCaptureDraws a SceneCapture on the Canvas
DrawMaterialFromWebUIDraws a WebUI on the Canvas
DrawPolygonDraws a N-Polygon on the Canvas
DrawRectDraws a filled Rect on the Canvas
DrawTextDraws a Text on the Canvas
DrawTextureDraws a Texture on the Canvas
Vector2DGetSizeGets the Canvas Size
RepaintForces the repaint
ResizeResizes the Canvas if not using auto_resize
SetAutoRepaintRateSets the repaint rate
SetAutoResizeSets if the canvas should auto resize to screen size
SetScreenPositionSets the Canvas Screen Position offset
SetVisibilitySets if it's visible on screen

Clear

Clear the Canvas with a specific Color

my_canvas:Clear(clear_color)
TypeParameterDefaultDescription
Colorclear_color

DrawBox

Draws an unfilled box on the Canvas

This method can only be called from inside Update event

my_canvas:DrawBox(screen_position, screen_size, thickness, render_color?, blend_mode?)
TypeParameterDefaultDescription
Vector2Dscreen_position
Vector2Dscreen_size
floatthickness
Colorrender_color?Color.WHITE
BlendModeblend_mode?BlendMode.Opaque

DrawLine

Draws a line on the Canvas

This method can only be called from inside Update event

my_canvas:DrawLine(screen_position_a, screen_position_b, thickness, render_color, blend_mode?)
TypeParameterDefaultDescription
Vector2Dscreen_position_a
Vector2Dscreen_position_b
floatthickness
Colorrender_color
BlendModeblend_mode?BlendMode.Opaque

DrawMaterial

Draws a Material on the Canvas

This method can only be called from inside Update event

Note: Due how Unreal handles Render Targets, drawing material on Canvas result on a weird translucent effect. Hope in the future to be improved.

my_canvas:DrawMaterial(material_path, screen_position, screen_size, coordinate_position, coordinate_size?, rotation?, pivot_point?, blend_mode?)
TypeParameterDefaultDescription
Material Referencematerial_path
Vector2Dscreen_position
Vector2Dscreen_size
Vector2Dcoordinate_position
Vector2Dcoordinate_size?Vector2D(1, 1)
floatrotation?0
Vector2Dpivot_point?Vector2D(0.5, 0.5)
BlendModeblend_mode?BlendMode.Opaque

DrawMaterialFromSceneCapture

Draws a SceneCapture on the Canvas

This method can only be called from inside Update event

Note: Due how Unreal handles Render Targets, drawing material on Canvas result on a weird translucent effect. Hope in the future to be improved.

my_canvas:DrawMaterialFromSceneCapture(scenecapture_entity, screen_position, screen_size, coordinate_position, coordinate_size?, rotation?, pivot_point?, blend_mode?)
TypeParameterDefaultDescription
SceneCapturescenecapture_entity
Vector2Dscreen_position
Vector2Dscreen_size
Vector2Dcoordinate_position
Vector2Dcoordinate_size?Vector2D(1, 1)
floatrotation?0
Vector2Dpivot_point?Vector2D(0.5, 0.5)
BlendModeblend_mode?BlendMode.Opaque

DrawMaterialFromWebUI

Draws a WebUI on the Canvas

This method can only be called from inside Update event

Note: Due how Unreal handles Render Targets, drawing material on Canvas result on a weird translucent effect. Hope in the future to be improved.

my_canvas:DrawMaterialFromWebUI(webui_entity, screen_position, screen_size, coordinate_position, coordinate_size?, rotation?, pivot_point?, blend_mode?)
TypeParameterDefaultDescription
WebUIwebui_entity
Vector2Dscreen_position
Vector2Dscreen_size
Vector2Dcoordinate_position
Vector2Dcoordinate_size?Vector2D(1, 1)
floatrotation?0
Vector2Dpivot_point?Vector2D(0.5, 0.5)
BlendModeblend_mode?BlendMode.Opaque

DrawPolygon

Draws a N-Polygon on the Canvas

This method can only be called from inside Update event

my_canvas:DrawPolygon(texture_path, screen_position, radius?, number_of_sides?, render_color?, blend_mode?)
TypeParameterDefaultDescription
Image Pathtexture_pathPass empty to use default white Texture
Vector2Dscreen_position
Vector2Dradius?Vector2D(1, 1)
integernumber_of_sides?3
Colorrender_color?Color.WHITE
BlendModeblend_mode?BlendMode.Opaque

DrawRect

Draws a fille Rect on the Canvas

This method can only be called from inside Update event

my_canvas:DrawRect(texture_path, screen_position, screen_size, render_color?, blend_mode?)
TypeParameterDefaultDescription
Image Pathtexture_pathPass empty to use default white Texture
Vector2Dscreen_position
Vector2Dscreen_size
Colorrender_color?Color.WHITE
BlendModeblend_mode?BlendMode.Opaque

DrawText

Draws a Text on the Canvas

This method can only be called from inside Update event

Shadow and Outline won't work properly with Transparent clear_color

my_canvas:DrawText(text, screen_position, font_type?, font_size?, text_color?, kerning?, center_x?, center_y?, shadow_color?, shadow_offset?, outlined?, outline_color?)
TypeParameterDefaultDescription
stringtext
Vector2Dscreen_position
FontTypefont_type?FontType.Roboto
integerfont_size?12
Colortext_color?Color.WHITE
floatkerning?0
booleancenter_x?false
booleancenter_y?false
Colorshadow_color?Color.TRANSPARENT
Vector2Dshadow_offset?Vector2D(1, 1)
booleanoutlined?false
Coloroutline_color?Color.BLACK

DrawTexture

Draws a Texture on the Canvas

This method can only be called from inside Update event

my_canvas:DrawTexture(texture_path, screen_position, screen_size, coordinate_position, coordinate_size?, render_color?, blend_mode?, rotation?, pivot_point?)
TypeParameterDefaultDescription
Image Pathtexture_path
Vector2Dscreen_position
Vector2Dscreen_size
Vector2Dcoordinate_position
Vector2Dcoordinate_size?Vector2D(1, 1)
Colorrender_color?Color.WHITE
BlendModeblend_mode?BlendMode.Opaque
floatrotation?0
Vector2Dpivot_point?Vector2D(0.5, 0.5)

GetSize

Gets the Canvas Size

— Returns Vector2D (the current size).

local ret = my_canvas:GetSize()

Repaint

Forces the repaint, this will trigger Update event

my_canvas:Repaint()

Resize

Resizes the Canvas if not using auto_resize

my_canvas:Resize(width, height)
TypeParameterDefaultDescription
integerwidth
integerheight

SetAutoRepaintRate

Sets it to -1 to stop auto repainting or 0 to repaint every frame

my_canvas:SetAutoRepaintRate(auto_repaint_rate)
TypeParameterDefaultDescription
booleanauto_repaint_rate

SetAutoResize

Sets if the canvas should auto resize to screen size

my_canvas:SetAutoResize(auto_resize)
TypeParameterDefaultDescription
booleanauto_resize

SetScreenPosition

Sets the Canvas Screen Position offset

my_canvas:SetScreenPosition(screen_position)
TypeParameterDefaultDescription
Vector2Dscreen_position

SetVisibility

Sets if it's visible on screen

my_canvas:SetVisibility(visible)
TypeParameterDefaultDescription
booleanvisible

🚀 Events

NameDescription
UpdateCalled when the Canvas needs to be painted

You can only call :Draw...() methods from inside this event

Update

Called when the Canvas needs to be painted

You can only call :Draw...() methods from inside this event
Canvas.Subscribe("Update", function(self, width, height)
-- Update was called
end)
TypeArgumentDescription
Canvasself
integerwidth
integerheight