🖼️ 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?)

Type	Name	Default	Description
boolean	is_visible	true	Whether to draw it on screen
Color	clear_color	Color.TRANSPARENT	Color to clear with (background color)
float	auto_repaint_rate	-1	Rate to auto repaint (call Update event), pass 0 for every frame, -1 to disable
boolean	should_clear_before_update	true	Whether to clear with Clear Color before updates
boolean	auto_resize	true	Auto resize with screen's size
integer	width	0	If not using auto_resize
integer	height	0	If not using auto_resize
Vector2D	screen_position	Vector2D(0, 0)	If not using auto_resize, offset when drawing to screen

🗿 Static Functions

This class doesn't have own static functions.

🦠 Functions

	Returns	Name	Description
		Clear	Clear the Canvas with a specific Color
		DrawBox	Draws an unfilled box on the Canvas
		DrawLine	Draws a line on the Canvas
		DrawMaterial	Draws a Material on the Canvas
		DrawMaterialFromSceneCapture	Draws a SceneCapture on the Canvas
		DrawMaterialFromWebUI	Draws a WebUI on the Canvas
		DrawPolygon	Draws a N-Polygon on the Canvas
		DrawRect	Draws a filled Rect on the Canvas
		DrawText	Draws a Text on the Canvas
		DrawTexture	Draws a Texture on the Canvas
	Vector2D	GetSize	Gets the Canvas Size
		Repaint	Forces the repaint
		Resize	Resizes the Canvas if not using auto_resize
		SetAutoRepaintRate	Sets the repaint rate
		SetAutoResize	Sets if the canvas should auto resize to screen size
		SetScreenPosition	Sets the Canvas Screen Position offset
		SetVisibility	Sets if it's visible on screen

---

Clear

Clear the Canvas with a specific Color

my_canvas:Clear(clear_color)

Type	Parameter	Default	Description
Color	clear_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?)

Type	Parameter	Default	Description
Vector2D	screen_position
Vector2D	screen_size
float	thickness
Color	render_color?	Color.WHITE
BlendMode	blend_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?)

Type	Parameter	Default	Description
Vector2D	screen_position_a
Vector2D	screen_position_b
float	thickness
Color	render_color
BlendMode	blend_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?)

Type	Parameter	Default	Description
Material Reference	material_path
Vector2D	screen_position
Vector2D	screen_size
Vector2D	coordinate_position
Vector2D	coordinate_size?	Vector2D(1, 1)
float	rotation?	0
Vector2D	pivot_point?	Vector2D(0.5, 0.5)
BlendMode	blend_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?)

Type	Parameter	Default	Description
SceneCapture	scenecapture_entity
Vector2D	screen_position
Vector2D	screen_size
Vector2D	coordinate_position
Vector2D	coordinate_size?	Vector2D(1, 1)
float	rotation?	0
Vector2D	pivot_point?	Vector2D(0.5, 0.5)
BlendMode	blend_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?)

Type	Parameter	Default	Description
WebUI	webui_entity
Vector2D	screen_position
Vector2D	screen_size
Vector2D	coordinate_position
Vector2D	coordinate_size?	Vector2D(1, 1)
float	rotation?	0
Vector2D	pivot_point?	Vector2D(0.5, 0.5)
BlendMode	blend_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?)

Type	Parameter	Default	Description
Image Path	texture_path		Pass empty to use default white Texture
Vector2D	screen_position
Vector2D	radius?	Vector2D(1, 1)
integer	number_of_sides?	3
Color	render_color?	Color.WHITE
BlendMode	blend_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?)

Type	Parameter	Default	Description
Image Path	texture_path		Pass empty to use default white Texture
Vector2D	screen_position
Vector2D	screen_size
Color	render_color?	Color.WHITE
BlendMode	blend_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?)

Type	Parameter	Default	Description
string	text
Vector2D	screen_position
FontType	font_type?	FontType.Roboto
integer	font_size?	12
Color	text_color?	Color.WHITE
float	kerning?	0
boolean	center_x?	false
boolean	center_y?	false
Color	shadow_color?	Color.TRANSPARENT
Vector2D	shadow_offset?	Vector2D(1, 1)
boolean	outlined?	false
Color	outline_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?)

Type	Parameter	Default	Description
Image Path	texture_path
Vector2D	screen_position
Vector2D	screen_size
Vector2D	coordinate_position
Vector2D	coordinate_size?	Vector2D(1, 1)
Color	render_color?	Color.WHITE
BlendMode	blend_mode?	BlendMode.Opaque
float	rotation?	0
Vector2D	pivot_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)

Type	Parameter	Default	Description
integer	width
integer	height

---

SetAutoRepaintRate

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

my_canvas:SetAutoRepaintRate(auto_repaint_rate)

Type	Parameter	Default	Description
boolean	auto_repaint_rate

---

SetAutoResize

Sets if the canvas should auto resize to screen size

my_canvas:SetAutoResize(auto_resize)

Type	Parameter	Default	Description
boolean	auto_resize

---

SetScreenPosition

Sets the Canvas Screen Position offset

my_canvas:SetScreenPosition(screen_position)

Type	Parameter	Default	Description
Vector2D	screen_position

---

SetVisibility

Sets if it's visible on screen

my_canvas:SetVisibility(visible)

Type	Parameter	Default	Description
boolean	visible

🚀 Events

	Name	Description
	Update	Called 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)

Type	Argument	Description
Canvas	self
integer	width
integer	height