Skip to main content
Version: latest - a1.7.0 βš–οΈ

πŸ–ΌοΈ Canvas

Canvas is an entity which you can draw onto it.

info

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

Usage​

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

-- Subscribes for Update, we can only Draw inside this event
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
canvas:Repaint()

-- Applies the Canvas material into a Prop
my_prop:SetMaterialFromCanvas(canvas)
tip

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

Constructor Parameters​

TypeNameDefaultDescription
booleanis_visibletrueif Canvas is visible on Screen by default
Colorclear_colorColor.TRANSPARENTcolor of the default background
numberauto_repaint_rate-1frequency to auto repaint (to retrigger Update event)
booleanshould_clear_before_updatetrueif should clear the Canvas (using clear_color) before every Update
booleanauto_resizetrueif should auto resize when screen changes it's size (useful OFF when you are painting meshes with Canvas)
numberwidth0size of the Canvas when you are not using auto_resize
numberheight0size of the Canvas when you are not using auto_resize

Functions​

ReturnsNameDescription
DrawBoxDraws a unfilled box on the Canvas
DrawLineDraws a line on the Canvas
DrawMaterialDraws a Material 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
SetAutoRepaintRateChanges the frequency of the auto update
SetVisibleChanges if it's visible on screen
RepaintForces the repaint
ClearClears the Canvas with a specific Color

DrawBox​

Draws a box on the Canvas

note

This method can only be called from inside Update event

canvas:DrawBox(screen_position, screen_size, thickness, render_color)
TypeParameterDefault ValueDescription
Vector2Dscreen_position
Vector2Dscreen_size
numberthickness
Colorrender_color

DrawLine​

Draws a line on the Canvas

note

This method can only be called from inside Update event

canvas:DrawLine(screen_position_a, screen_position_b, thickness, render_color)
TypeParameterDefault ValueDescription
Vector2Dscreen_position_a
Vector2Dscreen_position_b
numberthickness
Colorrender_color

DrawMaterial​

Draws a Material on the Canvas

note

This method can only be called from inside Update event

canvas:DrawMaterial(material_path, screen_position, screen_size, coordinate_position, coordinate_size, rotation, pivot_point)
TypeParameterDefault ValueDescription
Material Assetmaterial_path
Vector2Dscreen_position
Vector2Dscreen_size
Vector2Dcoordinate_position
Vector2Dcoordinate_sizeVector2D(1, 1)
numberrotation0
Vector2Dpivot_pointVector2D(0.5, 0.5)

DrawText​

Draws a Text on the Canvas

note

This method can only be called from inside Update event

Shadow and Outline won't work properly with Transparent clear_color.

canvas:DrawText(text, screen_position, font_type, font_size, text_color, kerning, center_x, center_y, shadow_color, shadow_offset, outlined, outline_color)
TypeParameterDefault ValueDescription
stringtext
Vector2Dscreen_position
FontTypefont_typeFontType.Roboto
numberfont_size12
Colortext_colorColor.WHITE
numberkerning0
booleancenter_xfalse
booleancenter_yfalse
Colorshadow_colorColor.TRANSPARENT
Vector2Dshadow_offsetVector2D(1, 1)
booleanoutlinedfalse
Coloroutline_colorColor.BLACK

DrawTexture​

Draws a Texture on the Canvas

note

This method can only be called from inside Update event

canvas:DrawTexture(texture_path, screen_position, screen_size, coordinate_position, coordinate_size, render_color, blend_mode, rotation, pivot_point)
TypeParameterDefault ValueDescription
Image Special Pathtexture_path
Vector2Dscreen_position
Vector2Dscreen_size
Vector2Dcoordinate_position
Vector2Dcoordinate_sizeVector2D(1, 1)
Colorrender_colorColor.WHITE
BlendModeblend_modeBlendMode.Opaque
numberrotation0
Vector2Dpivot_pointVector2D(0.5, 0.5)

DrawPolygon​

Draws a N-Polygon on the Canvas

note

This method can only be called from inside Update event

canvas:DrawPolygon(texture_path, screen_position, radius, number_of_sides, render_color)
TypeParameterDefault ValueDescription
Image Special Pathtexture_pathPass "" to use default white Texture
Vector2Dscreen_position
Vector2DradiusVector2D(1, 1)
numbernumber_of_sides3
Colorrender_colorColor.WHITE

DrawRect​

Draws a filled Rect on the Canvas

note

This method can only be called from inside Update event

canvas:DrawRect(texture_path, screen_position, screen_size, render_color)
TypeParameterDefault ValueDescription
Image Special Pathtexture_pathPass "" to use default white Texture
Vector2Dscreen_position
Vector2Dscreen_size
Colorrender_colorColor.WHITE

SetAutoRepaintRate​

Change the auto repaint Rate

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

canvas:SetAutoRepaintRate(auto_repaint_rate)
TypeParameterDefault ValueDescription
booleanauto_repaint_rate

SetVisible​

Sets if it's visible on screen

canvas:SetVisible(visible)
TypeParameterDefault ValueDescription
booleanvisible

Repaint​

Forces the repaint, this will trigger Update event

canvas:Repaint()

Clear​

Clear the Canvas with a specific Color

canvas:Clear(clear_color)
TypeParameterDefault ValueDescription
Colorclear_color

Events​

Update​

Called when the Canvas needs to be painted

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

my_canvas:Subscribe("Update", function(self, width, height)
self:DrawText(...)
self:DrawLine(...)
end)
TypeParameterDescription
Canvasself
numberwidth
numberheight