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

Type	Name	Default	Description
boolean	is_visible	true	if Canvas is visible on Screen by default
Color	clear_color	Color.TRANSPARENT	color of the default background
number	auto_repaint_rate	-1	frequency to auto repaint (to retrigger Update event)
boolean	should_clear_before_update	true	if should clear the Canvas (using clear_color) before every Update
boolean	auto_resize	true	if should auto resize when screen changes it's size (useful OFF when you are painting meshes with Canvas)
number	width	0	size of the Canvas when you are not using auto_resize
number	height	0	size of the Canvas when you are not using auto_resize

Functions

Returns	Name	Description
	DrawBox	Draws a unfilled box on the Canvas
	DrawLine	Draws a line on the Canvas
	DrawMaterial	Draws a Material 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	Changes the frequency of the auto update
	SetVisible	Changes if it's visible on screen
	Repaint	Forces the repaint
	Clear	Clears 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)

Type	Parameter	Default Value	Description
Vector2D	screen_position
Vector2D	screen_size
number	thickness
Color	render_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)

Type	Parameter	Default Value	Description
Vector2D	screen_position_a
Vector2D	screen_position_b
number	thickness
Color	render_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)

Type	Parameter	Default Value	Description
Material Asset	material_path
Vector2D	screen_position
Vector2D	screen_size
Vector2D	coordinate_position
Vector2D	coordinate_size	Vector2D(1, 1)
number	rotation	0
Vector2D	pivot_point	Vector2D(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)

Type	Parameter	Default Value	Description
string	text
Vector2D	screen_position
FontType	font_type	FontType.Roboto
number	font_size	12
Color	text_color	Color.WHITE
number	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

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)

Type	Parameter	Default Value	Description
Image Special 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
number	rotation	0
Vector2D	pivot_point	Vector2D(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)

Type	Parameter	Default Value	Description
Image Special Path	texture_path		Pass "" to use default white Texture
Vector2D	screen_position
Vector2D	radius	Vector2D(1, 1)
number	number_of_sides	3
Color	render_color	Color.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)

Type	Parameter	Default Value	Description
Image Special Path	texture_path		Pass "" to use default white Texture
Vector2D	screen_position
Vector2D	screen_size
Color	render_color	Color.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)

Type	Parameter	Default Value	Description
boolean	auto_repaint_rate

SetVisible

Sets if it's visible on screen

canvas:SetVisible(visible)

Type	Parameter	Default Value	Description
boolean	visible

Repaint

Forces the repaint, this will trigger Update event

canvas:Repaint()

Clear

Clear the Canvas with a specific Color

canvas:Clear(clear_color)

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

Type	Parameter	Description
Canvas	self
number	width
number	height