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

🖼️ Canvas

Canvas is an entity which you can draw onto it.

💂Authority
This class can only be spawned on 🟧 Client.

🎒 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?)
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

🗿 Static Functions

This entity doesn't have own static functions.

🦠 Functions

ReturnsNameDescription
DrawBoxDraws an unfilled box on the Canvas
DrawLineDraws a line on the Canvas
DrawMaterialDraws a Material on the Canvas
DrawMaterialFromWebUIDraws a WebUI on the Canvas
DrawMaterialFromSceneCaptureDraws a SceneCapture on the Canvas
DrawTextDraws a Text on the Canvas
DrawTextureDraws a Texture on the Canvas
DrawPolygonDraws a N-Polygon on the Canvas
DrawRectDraws a filled Rect on the Canvas
SetAutoRepaintRateSets the repaint rate
SetVisibilitySets if it's visible on screen
RepaintForces the repaint
ClearClear the Canvas with a specific 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

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

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

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)

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

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

SetVisibility

Sets if it's visible on screen

my_canvas:SetVisibility(visible)
TypeParameterDefaultDescription
booleanvisible

Repaint

Forces the repaint, this will trigger Update event

my_canvas:Repaint()

Clear

Clear the Canvas with a specific Color

my_canvas:Clear(clear_color)
TypeParameterDefaultDescription
Colorclear_color

🚀 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)

end)
TypeArgumentDescription
Canvasself
integerwidth
integerheight