Canvas Drawing Methods:
Canvas:Fill (Colour: Color3)
- This will go through every single pixel in the canvas and change the colours to your desired colour.
Parameters and Returns
Parameters:
Colour Color3
- Default:
- Description: The colour that you wish to apply.
Returns:
Return Type: Void
Summary: Nothing will be returned (nil)
Canvas:Clear ()
- Will go through every single pixel within the canvas and replace them with the canvas background colour.
Parameters and Returns
Parameters:
This function has no parameters
Returns:
Return Type: Void
Summary: Nothing will be returned (nil)
Canvas:FloodFill (Point: Vector2, Colour: Color3) : {…}
-
This function will fill an area of pixels on the canvas of the specific colour that your point is on. This works pretty well the same way how MS Paint’s paint bucket tool does.
-
NOTE: This method is not fast and may cause lag spikes when using on very large high-res areas. Do not use for real-time engines!
Example
-- Divide the canvas into two parts with a line (Assuming your canvas is at a resolution of 100 x 100)
local LinePointA = Vector2.new(1, 40)
local LinePointA = Vector2.new(100, 60)
Canvas:DrawLine(LinePointA, LinePointB, Color3.new(0, 0, 0))
-- Fill the bottom half of the canvas red
Canvas:FloodFill(Vector2.new(50, 75), Color3.new(1, 0, 0))
Parameters and Returns
Parameters:
Point Vector2
- Default:
- Description: The point to start filling from.
Colour Color3
- Default:
- Description: The colour that you wish to use to fill the area of pixels with.
Returns:
Return Type: Table
Summary: A table of all the points that were coloured.
Canvas:FloodFillXY (X: number, Y: number, Colour: Color3)
-
This method will fill an area of pixels on the canvas of the specific colour that your point is on. This works pretty well the same way how MS Paint’s paint bucket tool does.
-
NOTE: This method is not fast and may cause lag spikes when using on very large high-res areas. Do not use for real-time engines!
Example
-- Divide the canvas into two parts with a line (Assuming your canvas is at a resolution of 100 x 100)
local LinePointA = Vector2.new(1, 40)
local LinePointA = Vector2.new(100, 60)
Canvas:DrawLineXY(1, 40, 100, 60, Color3.new(0, 0, 0))
-- Fill the bottom half of the canvas red
Canvas:FloodFillXY(50, 75, Color3.new(1, 0, 0))
Parameters and Returns
Parameters:
X number
- Default:
- Description: The X coordinate to start filling from.
Y number
- Default:
- Description: The Y coordinate to start filling from.
Colour Color3
- Default:
- Description: The colour that you wish to use to fill the area of pixels with.
Returns:
Return Type: Void
Summary: Nothing will be returned (nil)
Canvas:DrawPixel (Point: Vector2, Colour: Color3) : Vector2
-
This will change the pixel at the chosen point and change its colour.
-
NOTE: Use the SetPixel method if you plan on doing proper pixel-based real-time high resolution projects, as it is faster than this method as it avoids clip checks, rounding, and vector constructing.
Example
-- Create a canvas and place a red pixel in the middle of it
local Canvas = CanvasDraw.new(Frame, Vector2.new(50, 50))
Canvas:DrawPixel(Vector2.new(25, 25), Color3.new(1, 0, 0))
Parameters and Returns
Parameters:
Point Vector2
- Default:
- Description: The point that determines what pixel to colour.
Colour Color3
- Default:
- Description: The colour that you wish to apply.
Returns:
Return Type: Vector2
Summary: The point that you have selected.
Canvas:SetPixel (X: number, Y: number, Colour: Color3)
- This behaves similarly to
DrawPixel(), all though main difference being is that this a much more performant method for colouring a pixel to the screen as it avoids constructing a vector and avoids checks to the canvas, unlike DrawPixel. If you want an even faster method, use SetRGB instead.
Example
-- Create a canvas and place a red pixel at point 25, 40
local Canvas = CanvasDraw.new(Frame, Vector2.new(50, 50))
Canvas:SetPixel(25, 40, Color3.new(1, 0, 0))
Parameters and Returns
Parameters:
Point Vector2
- Default:
- Description: The point that determines what pixel to colour.
Colour Color3
- Default:
- Description: The colour that you wish to apply.
Returns:
Return Type: Void
Summary: Nothing will be returned (nil)
Canvas:SetRGB (X: number, Y: number, R: number, G: number, B: number)
-
This behaves similarly to SetPixel(), all though main difference being is that this is the raw and fastest method to drawing a pixel to the canvas.
-
This method is highly recommended if you plan on doing proper real-time per-pixel work with high resolutions.
Example
-- Create a canvas and place a red pixel at point 25, 40
local Canvas = CanvasDraw.new(Frame, Vector2.new(50, 50))
Canvas:SetRGB(25, 40, 1, 0, 0)
Parameters and Returns
Parameters:
X number
- Default:
- Description: The X coordinate that determines what pixel to colour.
Y number
- Default:
- Description: The Y coordinate that determines what pixel to colour.
R number
- Default:
- Description: The R channel of colour that you wish to apply.
G number
- Default:
- Description: The G channel of colour that you wish to apply.
B number
- Default:
- Description: The B channel of colour that you wish to apply.
Returns:
Return Type: Void
Summary: Nothing will be returned (nil)
Canvas:SetAlpha (X: number, Y: number, Alpha: number)
- Sets the alpha channel/value of a pixel. (Transparency)
Example
-- Create a canvas and place a red pixel at point 25, 40
local Canvas = CanvasDraw.new(Frame, Vector2.new(50, 50))
Canvas:SetRGB(25, 40, 1, 0, 0)
Parameters and Returns
Parameters:
X number
- Default:
- Description: The X coordinate that determines what pixel to colour.
Y number
- Default:
- Description: The Y coordinate that determines what pixel to colour.
Alpha number
- Default:
- Description: The alpha/transparency value that you wish to apply.
Returns:
Return Type: Void
Summary: Nothing will be returned (nil)
Canvas:DrawCircle (Point: Vector2, Radius: number, Colour: Color3, Fill: boolean?) : {…}
- This will create a circle at the desired point with a set radius and colour. This shape originates from the centre of your point when drawn.
Example
local CirclePoint = Vector.new(50, 50) -- The circle's origin is the centre, so the circle should be placed in the middle of the canvas
local CircleRadius = 10 -- The radius of the circle in pixels
local CircleColour = Color3.new(1, 0, 0) -- Give the circle a nice red
local Canvas = CanvasDraw.new(Frame)
Canvas:DrawCircle(
CirclePoint,
CircleRadius,
CircleColour,
false -- Don't fill the circle with colour. This should create a circle outline instead.
)
Parameters and Returns
Parameters:
Point Vector2
- Default:
- Description: The point that you wish to place your circle at.
Radius number
- Default:
- Description: The radius of the circle. This determines how large your circle will be. Be careful not to draw the circle too big. Otherwise, if the circle is clipping through the sides of the canvas, the circle may break and be drawn correctly.
Colour Color3
- Default:
- Description: The colour that you wish to apply to your shape
Fill boolean
- Default: true
- Description: Determines wether every pixel within the shape get’s filled with colour. When set to false or left empty, the shape created will be an outline only.
Returns:
**Return Type: Table
Summary: Returns an array of all the pixel points (Vector2s) that have been drawn on for the circle.
Canvas:DrawCircleXY (X: number, Y: number, Radius: number, Colour: Color3, Fill: boolean?)
-
Behaves pretty well exactly the same as DrawCircle(), but uses an X and a Y parameter as the circle point. This function is also much more performant than DrawCircle(), but avoids checks to the coordinates on the canvas. So the circle will not be able to draw or even partially go out of bounds in the canvas.
-
In most cases, DrawCircle() is much more recommended and should be used instead.
Example
local CircleRadius = 10 -- The radius of the circle in pixels
local CircleColour = Color3.new(1, 0, 0) -- Give the circle a nice red colour
local Canvas = CanvasDraw.new(Frame)
Canvas:DrawCircle(
50, 50, -- The circle's origin is the centre, so the circle should be placed in the middle of the canvas
CircleRadius,
CircleColour,
false -- Don't fill the circle with colour. This should create a circle outline instead.
)
Parameters and Returns
Parameters:
X number
- Default:
- Description: The X coordinate that you wish to place your circle at.
Y number
- Default:
- Description: The Y coordinate that you wish to place your circle at.
Radius number
- Default:
- Description: The radius of the circle. This determines how large your circle will be. Be careful not to draw the circle too big. Otherwise, if the circle is clipping through the sides of the canvas, the circle may break and be drawn correctly.
Colour Color3
- Default:
- Description: The colour that you wish to apply to your shape
Fill boolean
- Default: true
- Description: Determines wether every pixel within the shape get’s filled with colour. When set to false or left empty, the shape created will be an outline only.
Returns:
Return Type: Void
Summary: Nothing will be returned (nil)
Canvas:DrawRectangle (PointA: Vector2, PointB: Vector2, Colour: Color3, Fill: boolean?) : {…}
- This will draw a simple rectangle shape from PointA (top left) to PointB (bottom right).
Example
-- Define the rectangle
local PointA = Vector.new(25, 25)
local PointB = Vector.new(75, 35)
local Colour = Color3.new(1, 0, 0) -- Give the rectangle a nice red colour
local Canvas = CanvasDraw.new(Frame)
Canvas:DrawRectangle(
PointA,
PointB,
Colour,
false -- Don't fill the rectangle with colour. This should create an outline of the rectangle instead.
)
Parameters and Returns
Parameters:
PointA Vector2
- Default:
- Description: The starting point on the canvas that you draw your rectangle from.
PointB Vector2
- Default:
- Description: The ending point on the canvas that you draw your rectangle to.
Colour Color3
- Default:
- Description: The colour that you wish to apply to your shape.
Fill boolean
- Default: true
- Description: Determines wether every pixel within the shape get’s filled with colour. When set to false or left empty, the shape created will be an outline only.
Returns:
**Return Type: Table
Summary: Returns an array of all the points (Vector2) that have been drawn on to create the rectangle.
Canvas:DrawRectangleXY (X1: number, Y1: number, X2: number, Y2: number, Colour: Color3, Fill: boolean?)
-
This will draw a simple rectangle from X1, Y1 (top left) to X2, Y2 (bottom right).
-
This almost behaves exactly like DrawRectange(), but with coordinates in the parameters instead of Vector2 points with no checks.
(This means your rectangle coordinates/points have to be whole numbers and within the canvas)
-
This function also runs much faster than the normal DrawRectange()
Example
local Colour = Color3.new(1, 0, 0) -- Give the rectangle a nice red colour
local Canvas = CanvasDraw.new(Frame)
Canvas:DrawRectangleXY(
25, 25,
75, 50,
Colour,
false -- Don't fill the rectangle with colour. This should create an outline of the rectangle instead.
)
Parameters and Returns
Parameters:
X1 number
- Default:
- Description: The starting point for the X coordinate on the canvas for your rectangle.
Y1 number
- Default:
- Description: The starting point for the Y coordinate on the canvas for your rectangle.
X2 number
- Default:
- Description: The ending point for the X coordinate on the canvas for your rectangle.
Y2 number
- Default:
- Description: The ending point for the Y coordinate on the canvas for your rectangle.
Colour Color3
- Default:
- Description: The colour that you wish to apply to your shape.
Fill boolean
- Default: true
- Description: Determines wether every pixel within the shape get’s filled with colour. When set to false or left empty, the shape created will be an outline only.
Returns:
**Return Type: Void
Summary: Nothing will be returned (nil)
Canvas:DrawTriangle (PointA: Vector2, PointB: Vector2, PointC: Vector2, Colour: Color3, Fill: boolean?) : {…}
- This will draw a triangle from three points on the canvas (PointA, PointB, and PointC).
Example
-- Define the triangle
local PointA = Vector.new(25, 25)
local PointB = Vector.new(75, 25)
local PointC = Vector.new(50, 75)
local Colour = Color3.new(0, 0, 1) -- Give the triangle a nice blue colour
local Canvas = CanvasDraw.new(Frame)
Canvas:DrawTriangle(
PointA,
PointB,
PointC,
Colour,
false -- Don't fill the triangle with colour. This should create an outline of the triangle instead.
)
Parameters and Returns
Parameters:
PointA Vector2
- Default:
- Description: The first point for the corner of the triangle.
PointB Vector2
- Default:
- Description: The second point for the corner of the triangle.
PointC Vector2
- Default:
- Description: The third point for the corner of the triangle.
Colour Color3
- Default:
- Description: The colour that you wish to apply to your shape.
Fill boolean
- Default: true
- Description: Determines wether every pixel within the shape get’s filled with colour. When set to false or left empty, the shape created will be an outline only.
Returns:
Return Type: Table
Summary: Returns an array of all the points (Vector2) that have been drawn on to create the triangle.
Canvas:DrawTriangleXY (X1: number, Y1: number, X2: number, Y2: number, X3: number, Y3: number, Colour: Color3, Fill: boolean?)
-
This will draw a triangle from three points on the canvas ([X1, Y1], [X2, Y2] and [X3, Y3]).
-
This almost behaves exactly like DrawTriangle(), but with coordinates in the parameters instead of Vector2 points with no checks or rounding of the coordinates.
(This means your rectangle coordinates/points have to be whole numbers and within the canvas)
-
This function also runs much faster than the normal DrawTriangle()
Example
-- Define the triangle
local X1, Y1 = 25, 25
local X2, Y2 = 75, 25
local X3, Y3 = 50, 75
local Colour = Color3.new(0, 0, 1) -- Give the triangle a nice blue colour
local Canvas = CanvasDraw.new(Frame)
Canvas:DrawTriangle(
X1, Y1,
X2, Y2,
X3, Y3,
Colour,
false -- Don't fill the triangle with colour. This should create an outline of the triangle instead.
)
Parameters and Returns
Parameters:
X1 number
- Default:
- Description: The first X coordinate for the corner of the triangle.
Y1 number
- Default:
- Description: The first Y coordinate for the corner of the triangle.
X2 number
- Default:
- Description: The second X coordinate for the corner of the triangle.
Y2 number
- Default:
- Description: The second Y coordinate for the corner of the triangle.
X3 number
- Default:
- Description: The third X coordinate for the corner of the triangle.
Y3 number
- Default:
- Description: The third Y coordinate for the corner of the triangle.
Colour Color3
- Default:
- Description: The colour that you wish to apply to your shape.
Fill boolean
- Default: true
- Description: Determines wether every pixel within the shape get’s filled with colour. When set to false or left empty, the shape created will be an outline only.
Returns:
Return Type: Void
Summary: Nothing will be returned (nil)
Canvas:DrawLine (PointA: Vector2, PointB: Vector2, Colour: Color3, Thickness: number?) : {…}
- This will draw a simple pixel line from PointA to PointB with an optional thickness
Example
-- Define the line
local PointA = Vector.new(25, 25)
local PointB = Vector.new(75, 40)
local Colour = Color3.new(0, 0, 1)
local Canvas = CanvasDraw.new(Frame)
Canvas:DrawLine(PointA, PointB, Colour)
Parameters and Returns
Parameters:
PointA Vector2
- Default:
- Description: The starting point for the line.
PointB Vector2
- Default:
- Description: The ending point for the line.
Colour Color3
- Default:
- Description: The colour that you wish to apply to the line.
Thickness number
- Default: 1
- Description: The line’s thickness radius (in pixels)
Returns:
Return Type: Table
Summary: Returns an array of all the points (Vector2s) that have been drawn on to create the line.
Canvas:DrawLineXY (X1: number, Y1: number, X2: number, Y2: number, Colour: Color3, Thickness: number?)
-
This will draw a simple pixel line from X1, Y1 to X2, Y2 with an optional thickness parameter
-
This function behaves very much like DrawLine(), but uses X and Y coordinates as points in the parameters and will avoid checks, rounding and vector constructing. So ensure your coordinates are whole numbers and are within the canvas
Example
-- Define the line
local X1, Y1 = 25, 25
local X2, Y2 = 75, 40
local Colour = Color3.new(0, 0, 1)
local Canvas = CanvasDraw.new(Frame)
Canvas:DrawLineXY(X1, Y1, X2, Y2, Colour)
Parameters and Returns
Parameters:
X1 number
- Default:
- Description: The starting X coordinate for the line.
Y1 number
- Default:
- Description: The starting Y coordinate for the line.
X2 number
- Default:
- Description: The ending X coordinate for the line.
Y2 number
- Default:
- Description: The ending Y coordinate for the line.
Colour Color3
- Default:
- Description: The colour that you wish to apply to the line.
Thickness number
- Default: 1
- Description: The line’s thickness radius (in pixels)
Returns:
Return Type: Void
Summary: Nothing will be returned (nil)
Canvas:DrawImage (ImageData, Point: Vector2?, Scale: Vector2?, TransparencyEnabled: boolean?)
- This function will load the image from ImageData, which is assumed to be created from a SaveObject with the GetImageData() method, and then draw every single pixel from the data onto your canvas originating from the given point on your canvas. If this point parameter is empty, then the default point will be at the top left of your canvas (
Vector2.new(1, 1))
Example
local Saves = workspace.Saves -- Our folder containing our save objects
local SaveToLoad = Saves.MyDrawing -- Our save object to load
local ImageData = CanvasDraw.GetImageData(SaveToLoad) -- Get the image data from the save object
Canvas:DrawImage(
ImageData, -- Our data to draw from
Vector2.new(25, 25), -- Place the image at point 25, 25
Vector2.new(1, 1) -- Draw the image at normal scale (100%, 100%)
true -- Enable alpha transparency blending
)
Parameters and Returns
Parameters:
ImageData Table
- Default:
- Description: The ImageData that you wish to load onto your canvas.
Point Vector2
- Default: Vector2.new(1, 1)
- Description: The point on your canvas that you wish to draw the image from. (NOTE: The image’s origin is top left relative to it self)
Scale Vector2
- Default: Vector2.new(1, 1)
- Description: The image’s scaling factor. This variable is percentage based, meaning that (1, 1) is 100%, 100%, which means the default image resolution will be used, and (0.5, 0.5) is half of that, etc
TransparencyEnabled boolean
- Default: true
- Description: Determines whether alpha transparency will be applied to the drawn image in the canvas. When set to false, all transparent areas will be replaced with black. Setting this argument to false will also slightly improve performance. Especially for larger resolution images.
Returns:
Return Type: void
Summary: Nothing will be returned (nil)
Canvas:DrawImageXY (ImageData, X: number? Y: number?, ScaleX: number? ScaleY: number?, TransparencyEnabled: boolean?)
- This function will load the image from the ImageData and draw every single pixel from the data onto your canvas originating from the given point on your canvas. If this point parameter is empty, then the default point will be at the top left of your canvas (
Vector2.new(1, 1))
Example
local Saves = workspace.Saves -- Our folder containing our save objects
local SaveToLoad = Saves.MyDrawing -- Our save object to load
local ImageData = CanvasDraw.GetImageData(SaveToLoad) -- Get the image data from the save object
Canvas:DrawImage(
ImageData, -- Our data to draw from
25, 25, -- Place the image at point 25, 25
1, 1 -- Image scale percentage (Normal scaling at 1, 1)
true -- Enable alpha transparency blending
)
Parameters and Returns
Parameters:
ImageData Table
- Default:
- Description: The ImageData that you wish to load onto your canvas.
X number
- Default: 1
- Description: The X coordinate your canvas that you wish to draw the image from (NOTE: Image origin is top left)
Y number
- Default: 1
- Description: The Y coordinate your canvas that you wish to draw the image from (NOTE: Image origin is top left)
ScaleX number
- Default: 1
- Description: The image’s X scale. This variable is percentage based, meaning that 1 is 100%, and 0.5, is 50%, and so on.
ScaleX number
- Default: 1
- Description: The image’s Y scale. This variable is percentage based, meaning that 1 is 100%, and 0.5, is 50%, and so on.
TransparencyEnabled boolean
- Default: true
- Description: Determines whether alpha transparency will be applied to the drawn image in the canvas. When set to false, all transparent areas will be replaced with black. Setting this argument to false will also slightly improve performance. Especially for larger resolution images.
Returns:
Return Type: Void
Summary: Nothing will be returned (nil)
Canvas:DrawTexturedTriangle (PointA: Vector2, PointB: Vector2, PointC: Vector2, UV1: Vector2, UV2: Vector2, UV3: Vector2, ImageData, Brightness: number?)
-
This will draw a textured triangle from three points on the canvas ([X1, Y1], [X2, Y2] and [X3, Y3]) with a given set of UV coordinates for the image
-
The UV coordinates should be between 0 and 1 for each axis ([0, 0] being top left, and [1, 1] being bottom right
-
This can be used for 3D rendering or can be used for 2D textured polygons or custom 2D image transformations
Example
-- Define the triangle
local PointA = Vector2.new(25, 25)
local PointB = Vector2.new(75, 25)
local PointC = Vector2.new(50, 75)
local Texture = CanvasDraw.GetImageData(Gui.Textures["Wall-01.png"]) -- Get the ImageData from our SaveObject instance
Canvas:DrawTexturedTriangle(
PointA,
PointB,
PointC,
-- Set our UV coordinates to just be 3 of the image corners (top left, bottom left, bottom right)
Vector2.new(0, 0),
Vector2.new(0, 1),
Vector2.new(1, 1),
Texture,
0.5 -- Draw at half the brightness
)
Parameters and Returns
Parameters:
PointA Vector2
- Default:
- Description: The first corner coordinate for the triangle.
PointB Vector2
- Default:
- Description: The second corner coordinate for the triangle.
PointC Vector2
- Default:
- Description: The third corner coordinate for the triangle.
UV1 number
- Default:
- Description: The first UV coordinate from the image source.
UV2 number
- Default:
- Description: The second UV coordinate from the image source.
UV3 number
- Default:
- Description: The third UV coordinate from the image source.
ImageData ImageData
- Default:
- Description: The image that you wish to texture the triangle.
Brightness number?
- Default: 1
- Description: Determines how bright or dark the texture should be (0 is fully dark, 1 is full bright / normal)
Returns:
Return Type: Void
Summary: Nothing will be returned (nil)
Canvas:DrawTexturedTriangleXY (X1: number, Y1: number, X2: number, Y2: number, X3: number, Y3: number, U1: number, V1: number, U2: number, V2: number, U3: number, V3: number, ImageData, Brightness: number?)
-
This will draw a textured triangle from three points on the canvas ([X1, Y1], [X2, Y2] and [X3, Y3]) with a given set of UV coordinates for the image
-
The UV coordinates should be between 0 and 1 for each axis ([0, 0] being top left, and [1, 1] being bottom right
-
This can be used for 3D rendering or can be used for 2D textured polygons or custom 2D image transformations
-
This drawing function automatically clips to the canvas
Example
-- Define the triangle
local X1, Y1 = 25, 25
local X2, Y2 = 75, 25
local X3, Y3 = 50, 75
local Texture = CanvasDraw.GetImageData(Gui.Textures["Wall-01.png"]) -- Get the ImageData from our SaveObject instance
Canvas:DrawTexturedTriangleXY(
X1, Y1,
X2, Y2,
X3, Y3,
-- Set our UV coordinates to just be 3 of the image corners (top left, bottom left, bottom right)
0, 0,
0, 1,
1, 1,
Texture,
0.5 -- Draw at half the brightness
)
Parameters and Returns
Parameters:
X1 number
- Default:
- Description: The first X coordinate for the corner of the triangle.
Y1 number
- Default:
- Description: The first Y coordinate for the corner of the triangle.
X2 number
- Default:
- Description: The second X coordinate for the corner of the triangle.
Y2 number
- Default:
- Description: The second Y coordinate for the corner of the triangle.
X3 number
- Default:
- Description: The third X coordinate for the corner of the triangle.
Y3 number
- Default:
- Description: The third Y coordinate for the corner of the triangle.
U1 number
- Default:
- Description: The first U coordinate from the image source.
V1 number
- Default:
- Description: The first V coordinate from the image source.
U2 number
- Default:
- Description: The second U coordinate from the image source.
V2 number
- Default:
- Description: The second V coordinate from the image source.
U3 number
- Default:
- Description: The third U coordinate from the image source.
V3 number
- Default:
- Description: The third V coordinate from the image source.
ImageData ImageData
- Default:
- Description: The image that you wish to texture the triangle.
Brightness number?
- Default: 1
- Description: Determines how bright or dark the texture should be (0 is fully dark, 1 is full bright / normal)
Returns:
Return Type: Void
Summary: Nothing will be returned (nil)
Canvas:DrawDistortedImage (PointA: Vector2, PointB: Vector2, PointC: Vector2, PointD: Vector2, ImageData, Brightness: number?)
-
This method will draw a dynamic four point image. This method internally uses two textured triangles to draw this dynamic shape.
-
This can be used for basic 3D rendering and also presents an easy and fast way to create skewable, scalable and rotatable images as well
-
NOTE: This method uses affine transformations to map the image to the 2D plane, which means if you try to use this for perspective, you may get some unwanted distortion.
Example
local Canvas = CanvasDraw.new(Frame, Vector2.new(128, 128))
-- Define the quad
local CornerA = Vector2.new(25, 25)
local CornerB = Vector2.new(30, 75)
local CornerC = Vector2.new(75, 100)
local CornerD = Vector2.new(110, 40)
local Texture = CanvasDraw.GetImageData(Gui.Textures["Wall-01.png"]) -- Get the ImageData from our SaveObject instance
Canvas:DrawDistortedImage(
CornerA,
CornerB,
CornerC,
CornerD,
Texture
)
Parameters and Returns
Parameters:
PointA Vector2
- Default:
- Description: The first corner coordinate for the image.
PointB Vector2
- Default:
- Description: The second corner coordinate for the image.
PointC Vector2
- Default:
- Description: The third corner coordinate for the image.
PointD Vector2
- Default:
- Description: The third corner coordinate for the image.
ImageData ImageData
- Default:
- Description: The image that you wish to texture the triangle.
Brightness number?
- Default: 1
- Description: Determines how bright or dark the texture should be (0 is fully dark, 1 is full bright / normal)
Returns:
Return Type: Void
Summary: Nothing will be returned (nil)
Canvas:DrawDistortedImageXY (X1: number, Y1: number, X2: number, Y2: number, X3: number, Y3: number, X4: number, Y4: number, ImageData, Brightness: number?)
-
This method will draw a dynamic four point image. This method internally uses two textured triangles to draw this dynamic shape.
-
This can be used for basic 3D rendering and also presents an easy and fast way to create skewable, scalable and rotatable images as well
-
NOTE: This method uses affine transformations to map the image to the 2D plane, which means if you try to use this for perspective, you may get some unwanted distortion.
Example
local Canvas = CanvasDraw.new(Frame, Vector2.new(128, 128))
local Texture = CanvasDraw.GetImageData(Gui.Textures["Wall-01.png"]) -- Get the ImageData from our SaveObject instance
Canvas:DrawDistortedImageXY(
25, 25,
30, 75,
75, 100,
110, 40,
Texture
)
Parameters and Returns
Parameters:
X1 number
- Default:
- Description: The first corner X coordinate for the image.
Y1 number
- Default:
- Description: The first corner Y coordinate for the image.
X2 number
- Default:
- Description: The second corner X coordinate for the image.
Y2 number
- Default:
- Description: The second corner Y coordinate for the image.
X1 number
- Default:
- Description: The first corner X coordinate for the image.
Y1 number
- Default:
- Description: The first corner Y coordinate for the image.
ImageData ImageData
- Default:
- Description: The image that you wish to texture the triangle.
Brightness number?
- Default: 1
- Description: Determines how bright or dark the texture should be (0 is fully dark, 1 is full bright / normal)
Returns:
Return Type: Void
Summary: Nothing will be returned (nil)
Canvas:DrawRotatedImage (ImageData, Angle: number, Point: Vector2?, PivotPoint: Vector2?, Scale: Vector2?)
- Draws a rotated image to the canvas with a given angle with a pivoting point.
a pivot of (0, 0) will draw and rotate the image from the top left, and a pivot point of (1, 1) will do it from the bottom right corner.
Example
local Placement = Vector2.new(256, 256)
local Pivot = Vector2.new(0.5, 0.5)
Canvas.OnRendered:Connect(function(DeltaTime)
task.wait()
Rot += 0.5 * DeltaTime -- Rotate the image at a consistent speed
local Size = Vector2.new(1, 1) * (math.sin(Rot * 3) / 2 + 1)
Canvas:Clear()
Canvas:DrawRotatedImage(Image, Rot, Placement, Pivot, Size)
end)
Parameters and Returns
Parameters:
ImageData ImageData
- Default:
- Description: The image that you wish to use.
Angle number
- Default:
- Description: The angle at which you want to rotate the image by (in radians)
Point Vector2
- Default: Vector2.new(1, 1)
- Description: The canvas point for the image.
PivotPoint Vector2
- Default: Vector2.new(0, 0)
- Description: The coordinate for the image’s pivot/anchor point. (Axis lengths ranges from 0 to 1)
Scale Vector2
- Default: Vector2.new(1, 1)
- Description: The scale for the image. This vector is a percentage (e.g, setting to Vectoe2.new(1.5, 1) will stretch the image horizontally by 1.5x)
Returns:
Return Type: Void
Summary: Nothing will be returned (nil)
Canvas:DrawRotatedImageXY (ImageData, Angle: number, X: number?, Y: number?, PivotX: number?, PivotY: number?, ScaleX: number?, ScaleY: number?)
- Draws a rotated image to the canvas with a given angle with a pivoting point.
a pivot of (0, 0) will draw and rotate the image from the top left, and a pivot point of (1, 1) will do it from the bottom right corner.
Example
Canvas.OnRendered:Connect(function(DeltaTime)
task.wait()
Rot += 0.5 * DeltaTime -- Rotate the image at a consistent speed
local Size = math.sin(Rot * 3) / 2 + 1
Canvas:Clear()
Canvas:DrawRotatedImageXY(Image, Rot, 256, 256, 0.5, 0.5, Size, Size)
end)
Parameters and Returns
Parameters:
ImageData ImageData
- Default:
- Description: The image that you wish to use.
Angle number
- Default:
- Description: The angle at which you want to rotate the image by (in radians)
X number
- Default: 1
- Description: The X coordinate for the image.
Y number
- Default: 1
- Description: The Y coordinate for the image.
PivotX number
- Default: 0
- Description: The X coordinate for the image’s pivot/anchor point. (Ranges from 0 to 1)
PivotY number
- Default: 0
- Description: The Y coordinate for the image’s pivot/anchor point. (Ranges from 0 to 1)
ScaleX number
- Default: 1
- Description: The scale X for the image. This unit is a percentage (e.g, setting to 1.4 will stretch the image by 1.4x)
ScaleY number
- Default: 1
- Description: The scale Y for the image. This unit is a percentage (e.g, setting to 1.4 will stretch the image by 1.4x)
Returns:
Return Type: Void
Summary: Nothing will be returned (nil)
Canvas:DrawImageRect (ImageData, Point: Vector2, RectOffset: Vector2, RectSize: Vector2, Scale: Vector2?, FlipX: boolean?, FlipY: boolean?, AlphaBlending: boolean?)
-
Draws an image to the canvas with rect offset and rect size properties.
-
RectSize and RectOffset are in pixels.
-
Intended for image cropping or spritesheets.
-
NOTE: This doesn’t support padding/margins. Ensure your spritesheet contents have no padding/spacing between each sprite, or ensure you have the correct math to support padding.
Example
local Image = CanvasDraw.GetImageData(script.Tileset)
local ResX, ResY = 128, 128
local Canvas = CanvasDraw.new(Frame, Vector2.new(ResX, ResY))
local Columns, Rows = 13, 11
local SpriteSize = Vector2.new(16, 16) -- Rect size
local FPS = 3 -- How many frames we cycle through per second
local Scale = 3 -- Scale multiplier
-- Cycle through sheet sprite
while true do
for Y = 1, Rows do
for X = 1, Columns do
local OffsetX = (X - 1) * SpriteSize.X
local OffsetY = (Y - 1) * SpriteSize.Y
Canvas:Clear()
Canvas:DrawImageRect(Image, Vector2.new(1, 1), Vector2.new(OffsetX, OffsetY), SpriteSize, Vector2.new(Scale / Columns, Scale / Rows))
task.wait(1 / FPS)
end
end
end
Parameters and Returns
Parameters:
ImageData ImageData
- Default:
- Description: The image that you wish to use.
Point Vector2
- Default:
- Description: The canvas point for the image.
RectOffset Vector2
- Default:
- Description: The top-left offset point for sampling the image.
RectSize Vector2
- Default:
- Description: The rectangular sample size for drawing the image
Scale Vector2
- Default: Vector2.new(1, 1)
- Description: The scale for the image. This vector is a percentage (e.g, setting to Vectoe2.new(1.5, 1) will stretch the image horizontally by 1.5x)
FlipX boolean
- Default: false
- Description: Flips the rect region horizontally
FlipY boolean
- Default: false
- Description: Flips the rect region vertically
AlphaBlending boolean
- Default: false
- Description: Enables true transparency/alpha blending
Returns:
Return Type: Void
Summary: Nothing will be returned (nil)
Canvas:DrawImageRectXY (ImageData, X: number, Y: number, RectOffsetX: number, RectOffsetY: number, RectSizeX: number, RectSizeY: number, ScaleX: number?, ScaleY: number?, FlipX: boolean?, FlipY: boolean?, AlphaBlending boolean?)
-
Draws an image to the canvas with rect offset and rect size properties.
-
RectSize and RectOffset are in pixels.
-
Intended for image cropping or spritesheets.
-
NOTE: This doesn’t support padding/margins. Ensure your spritesheet contents have no padding/spacing between each sprite, or ensure you have the correct math to support padding.
Example
local Image = CanvasDraw.GetImageData(script.Tileset)
local ResX, ResY = 128, 128
local Canvas = CanvasDraw.new(Frame, Vector2.new(ResX, ResY))
local Columns, Rows = 13, 11
local SpriteWidth, SpriteHeight = 16, 16
local FPS = 3 -- How many frames we cycle through per second
local Scale = 3 -- Scale multiplier
-- Cycle through sheet sprite
while true do
for Y = 1, Rows do
for X = 1, Columns do
local OffsetX = (X - 1) * SpriteWidth
local OffsetY = (Y - 1) * SpriteHeight
Canvas:Clear()
Canvas:DrawImageRect(Image, Vector2.new(1, 1), OffsetX, OffsetY, SpriteWidth, SpriteHeight, Scale / Columns, Scale / Rows)
task.wait(1 / FPS)
end
end
end
Parameters and Returns
Parameters:
ImageData ImageData
- Default:
- Description: The image that you wish to use.
Point Vector2
- Default:
- Description: The canvas point for the image.
RectOffsetX number
- Default:
- Description: The top-left offset X point for sampling the image.
RectOffsetY number
- Default:
- Description: The top-left offset Y point for sampling the image.
RectSizeX number
- Default:
- Description: The rectangular sample X size for drawing the image.
RectSizeY number
- Default:
- Description: The rectangular sample Y size for drawing the image.
ScaleX number
- Default: 1
- Description: The X scale for the image. This number is a percentage (e.g, setting to 1.5 will stretch the image horizontally by 1.5x)
ScaleY number
- Default: 1
- Description: The Y scale for the image. This number is a percentage (e.g, setting to 1.5 will stretch the image vertically by 1.5x)
FlipX boolean
- Default: false
- Description: Flips the rect region horizontally
FlipY boolean
- Default: false
- Description: Flips the rect region vertically
AlphaBlending boolean
- Default: false
- Description: Enables true transparency/alpha blending
Returns:
Return Type: Void
Summary: Nothing will be returned (nil)
Canvas:DrawText (Text: string, Point: Vector2, Colour: Color3, FontName: string?, Scale: number?, Wrap: boolean?, Spacing: number?)
-
This method will draw text at a desired point on the canvas.
-
You can find the names of fonts under CanvasDraw > Fonts in the explorer.
-
TIP: You can put \n in your text parameter to have multiple lines without drawing text multiple times!
Example
Canvas:DrawText(
"first line \n second line!", -- The text to display (`\n` means new line and will not be displayed as text)
Vector2.new(5, 5), -- Place the text at point (5, 5)
Color3.new(0, 0, 0), -- Make the text black
2 -- Make the text twice as large
)
Parameters and Returns
Parameters:
Text string
- Default:
- Description: The text you wish to display. NOTE: If you wish to have multiple lines in one string, you can put \n in your text to declare new lines.
Point Vector2
- Default:
- Description: The point on the canvas to draw the text at. (NOTE: The origin for text is at the top left corner)
Colour Color3
- Default:
- Description: The colour you wish to apply to the text.
FontName string
- Default: “3x6”
- Description: The font you wish to apply. As of v4.5.0, there are 7 fonts you can use:
- 3x6
- Round
- Monogram
- GrandCD
- Atari
- Codepage
- CodepageLarge
Scale number
- Default: 1
- Description: The size multiplier for the text.
(NOTE: By default, a text’s character is sized at 3x5 on the canvas. Setting the scale to 2 will double that size to 6x10 on the canvas)
Wrap boolean
- Default: true
- Description: When set to true, the text will wrap and create a new line if it’s outside the canvas horizontally. When set to false, the text will just cut off and not create any more text.
Spacing number
- Default: 1
- Description: Determines how many pixels of space should be between each character both vertically and horizontally.
Returns:
Return Type: Void
Summary: Nothing will be returned (nil).
Canvas:DrawTextXY (Text: string, X: number, Y: number, Colour: Color3, FontName: string?, Scale: number?, Wrap: boolean?, Spacing: number?)
-
TIP: You can put \n in your text parameter to have multiple lines without drawing text multiple times!
-
NOTE: This function behaves exactly the same as DrawText(), but will take coordinates instead of a Vecor3 for the point.
Example
Canvas:DrawTextXY(
"first line \n second line!", -- The text to display (`\n` means new line and will not be displayed as text)
5, 5, -- Place the text at point (5, 5)
Color3.new(0, 0, 0), -- Make the text black
2 -- Make the text twice as large
)
Parameters and Returns
Parameters:
Text string
- Default:
- Description: The text you wish to display. NOTE: If you wish to have multiple lines in one string, you can put \n in your text to declare new lines.
X number
- Default:
- Description: The X coordinate on the canvas to draw the text at.
Y number
- Default:
- Description: The Y coordinate on the canvas to draw the text at.
Colour Color3
- Default:
- Description: The colour you wish to apply to the text.
FontName string
- Default: “3x6”
- Description: The font you wish to apply. As of v4.5.0, there are 7 fonts you can use:
- 3x6
- Round
- Monogram
- GrandCD
- Atari
- Codepage
- CodepageLarge
Scale number
- Default: 1
- Description: The size multiplier for the text. This value should be a whole number (int).
(NOTE: By default, a text’s size is equal to the chosen font’s character size. Setting the scale to 2 will double that size on the canvas)
Wrap boolean
- Default: true
- Description: When set to true, the text will wrap and create a new line if it’s outside the canvas horizontally. When set to false, the text will just cut off and not create any more text.
Spacing number
- Default: 1
- Description: Determines how many pixels of space should be between each character both vertically and horizontally.
Returns:
Return Type: Void
Summary: Nothing will be returned (nil).