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

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

🗿 Static Functions

This entity doesn't have own static functions.

🦠 Functions

	Returns	Name	Description
		DrawBox	Draws an unfilled box on the Canvas
		DrawLine	Draws a line on the Canvas
		DrawMaterial	Draws a Material on the Canvas
		DrawMaterialFromWebUI	Draws a WebUI on the Canvas
		DrawMaterialFromSceneCapture	Draws a SceneCapture on the Canvas
		DrawText	Draws a Text on the Canvas
		DrawTexture	Draws a Texture on the Canvas
		DrawPolygon	Draws a N-Polygon on the Canvas
		DrawRect	Draws a filled Rect on the Canvas
		SetAutoRepaintRate	Sets the repaint rate
		SetVisibility	Sets if it's visible on screen
		Repaint	Forces the repaint
		Clear	Clear 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?)

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

---

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

---

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

---

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)

---

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

---

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

---

SetVisibility

Sets if it's visible on screen

my_canvas:SetVisibility(visible)

Type	Parameter	Default	Description
boolean	visible

---

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)

Type	Parameter	Default	Description
Color	clear_color

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

end)

Type	Argument	Description
Canvas	self
integer	width
integer	height