API Documentation for CanvasDraw 3.4


This is a post that documents all of the properties, events, functions, objects and methods of the CanvasDraw Module. You can find more information about the module here:


Table of Contents:

Module

Canvas

  • Canvas Events
    • .Updated
  • Canvas Methods
    • :Update()
    • :CreateImageDataFromCanvas()
  • Canvas Fetch Methods
    • :GetPixel()
    • :GetPixels()
    • :GetMousePoint()
  • Canvas Drawing Methods
    • :FillCanvas()
    • :ClearCanvas()
    • :ClearPixels()
    • :FloodFill()
    • :DrawPixel()
    • :SetPixel()
    • :DrawCircle()
    • :DrawRectangle()
    • :DrawTriangle()
    • :DrawLine()
    • :DrawImage()
    • :DrawTexturedTriangle()
    • :DrawDistortedImage()
    • :DrawText()

ImageData

9 Likes

CanvasDraw Functions:


CanvasDraw.new (Frame: GuiObject, Resolution: Vector2?, CanvasColour: Color3?) : Canvas

  • This will create and return a canvas which contains a grid of pixels that can then be further used with its drawing methods.
Example
Canvas = CanvasDraw.new(
    Frame, -- Put the canvas in this frame
    Vector.new(150, 75), -- Give the a rectangle shape resolution
    Color3.new(1, 0, 0) -- Give the canvas a red background colour
)
Parameters and Returns

Parameters:

Frame GuiObject

  • Default:
  • Description: The Frame/GuiObject that the canvas will be parented to.

Resolution Vector2?

  • Default: Vector2.new(100, 100)
  • Description: The size that determines how many pixels are created. For example, a resolution of 150 x 150 will create a canvas with a grid of 22500 pixels that can be changed.

CanvasColour Color3?

  • Default: Frame.BackgroundColor3
  • Description: The colour that will be applied to all of the generated pixels. This colour will then be treated as the background colour for the canvas. This background colour can be used for clearing or delete functions such as ClearPixels().
  • If this parameter is empty, the colour will be the same as your chosen canvas frame’s BackgroundColor3 property.

Returns:

Return Type: Table/class
Summary: Returns the canvas class


CanvasDraw.CreateSaveObject (ImageData) : Instance

  • This function will return a folder instance that will be treated as a “SaveObject”. This instance has custom attributes that contain the data of your image. This instance is great as it is treated as an image asset for CanvasDraw. This means you can store images created by CanvasDraw and store them in a storage instance (such as a folder in ReplicatedStorage) and then you can easily load the image into canvas draw to be used when ever you want!

  • NOTE: ImageData on a save object cannot have a resolution greater than 256x256.

Example
local Saves = workspace.Saves -- A folder to store the save object

local ImageData = Canvas:CreateImageDataFromCanvas(
    false, 
    Vector2.new(1, 1), 
    Vector2.new(100, 100)
)

local SaveObject = CanvasDraw.CreateSaveObject(ImageData)
SaveObject.Name = "MyDrawing"
SaveObject.Parent = Saves
Parameters and Returns

Parameters:

ImageData Table

  • Default:
  • Description: The ImageData that you wish to use to create the save object.

Returns:

Return Type: SaveObject (Folder)
Summary: Returns a folder instance that contains compressed ImageData.


CanvasDraw.GetImageData (SaveObject: Instance) : ImageData

  • This function will read the SaveObject and return a decompressed ImageData object. This object contains cached pixel data for real-time image manipulation or sampling.
    This object also has a pixel fetch method!
    e.g. ImageData:GetPixelXY(x, y) or ImageData:GetPixel(point)
Example
-- Get the save object and it's data
local SaveObject = workspace.Saves.MyFirstDrawing -- Path to the save object
local ImageData = CanvasDraw.GetImageData(SaveObject)

-- Draw the image to the canvas
Canvas:DrawImage(ImageData)

-- Sample the middle pixel from our image (assuming it is a 100x100 image in this case)
local Colour, Alpha = ImageData:GetPixelXY(50, 50)

print("Colour:", Colour) -- The main color3 value
print("Alpha:", Alpha) -- The pixel's transparency value (from 0)
Parameters and Returns

Parameters:

SaveObject Folder

  • Default:
  • Description: The SaveObject instance folder that you wish to grab the ImageData from.

Returns:

Return Type: ImageData (Table)
Summary: The ImageData table that contains all data to your image from the SaveObject instance.


1 Like

Canvas Events:

Updated double - DeltaTime

  • Same as RunService.Heartbeat.
    This event is what CanvasDraw uses to update the canvas every frame when the AutoUpdate property is set to true.

  • This should be treated as an updated or rendered event for the canvas.


1 Like

Canvas Methods:


Canvas:DestroyCanvas ()

  • This will physically destroy the canvas that has been created by the CanvasDraw.new() function.
Parameters and Returns

Parameters:

This function has no parameters

Returns:

Return Type: Void
Summary: Nothing will be returned (nil)


Canvas:Update ()

  • This function allows you to manually update the canvas. Normally, for every heartbeat, CanvasDraw will automatically update the canvas so pixels will instantly appear on the canvas. This function may be helpful as you can control when to update the canvas. To use this function and to stop automatic updates, set the AutoUpdate property to false in the canvas class.
Example
-- Define our rectangle
local PointA = Vector2.new(25, 25)
local PointB = Vector2.new(75, 75)
local Colour = Color3.new(0, 0, 1)

-- Create the canvas and disable auto updating for every frame
local Canvas = CanvasDraw.new(Frame)
Canvas.AutoUpdate = false

-- Image will not show straight away, so we need to manually update the picture after drawing
Canvas:DrawRectangle(PointA, PointB, Color3.new(0, 0, 1))
Canvas:Update()
Parameters and Returns

Parameters:

This function has no parameters

Returns:

Return Type: Void
Summary: Nothing will be returned (nil)


Canvas:CreateImageDataFromCanvas (PointA: Vector2?, PointB: Vector2?) : ImageData

  • This method will return an ImageData table/class from the canvas pixels from PointA to PointB (if the PointA and PointB arguments are empty, then it will grab all pixels on the canvas instead)
  • This method was intended for plugin use. (e.g. An image editor / image file importer)
Example
-- Define the region to capture
local PointA = Vector.new(25, 25)
local PointB = Vector.new(75, 75)

local ImageData = Canvas:CreateImageDataFromCanvas(PointA, PointB)
Parameters and Returns

Parameters:

PointA Vector2

  • Default: Vector2.new(1, 1)
  • Description: The starting point on the canvas that you grab the pixels from for the ImageData.

PointB Vector2

  • Default: Canvas.Resolution
  • Description: The ending point on the canvas that you grab the pixels from for the ImageData.

Returns:

Return Type: ImageData (Table/class)
Summary: Returns the ImageData of your captured area on your canvas.


1 Like

Canvas Fetch Methods:


Canvas:GetPixel (Point: Vector2) : Color3

  • Returns the chosen pixel’s colour given from the provided point on the canvas.
Example
-- Get the colour on our canvas at point 50, 50
local Colour = Canvas:GetPixel(Vector2.new(50, 50))
print(Colour)
Parameters and Returns

Parameters:

Point Vector2

  • Default:
  • Description: The desired point that you wish to use to get the pixel colour from.

Returns:

Return Type: Color3
Summary: The pixel’s colour that has been chosen in the canvas from a given point.


Canvas:GetPixelXY (X: number, Y: number) : Color3

  • Returns the chosen pixel’s colours given from the provided X and Y coordinates on the canvas. This function behaves almost exactly the same as GetPixel(), but main difference being is that this is a slightly more performant version that uses an X and Y parameter for the point.
Example
-- Get the colour on our canvas at point 50, 50
local Colour = Canvas:GetPixelXY(50, 50)
print(Colour)
Parameters and Returns

Parameters:

X number

  • Default:
  • Description: The desired X coordinate that you wish to use to get the pixel colour from on the canvas.

Y number

  • Default:
  • Description: The desired Y coordinate that you wish to use to get the pixel colour from on the canvas.

Returns:

Return Type: Color3
Summary: The pixel’s colour that has been chosen in the canvas from a given point.


Canvas:GetPixels (PointA: Vector2?, PointB: Vector2?) : {…}

  • This will get all of the pixel colours in the canvas between two points in a square shape from corner to corner. If all the parameters are empty, every single pixel colour in the canvas will be returned instead.
Example
-- Define our region
local PointA = Vector2.new(25, 25)
local PointB = Vector2.new(50, 50)

local TableOfColours = Canvas:GetPixels(PointA, PointB)
Parameters and Returns

Parameters:

PointA Vector2

  • Default: Vector2.new(1, 1)
  • Description: The starting point in the canvas for the pixels to grab.

PointB Vector2

  • Default: Canvas.Resolution
  • Description: The ending point in the canvas for the pixels to grab.

Returns:

Return Type: Table
**Summary:**A table of all the pixel colours (Color3s) that are between PointA and PointB.


Canvas:GetMousePoint () : Vector2? CLIENT ONLY

  • This will function will either return a Vector2 point on the canvas from the client’s mouse position, or nil if the mouse isn’t within the canvas.
  • This function will work for both Guis and SurfaceGuis.
  • NOTE: This function only works on the client or locally. If you are using this function from the server, it will throw a warning in the console/output.
Example
-- Get the mouses point on the canvas and draws a pixel.
local Point = Canvas:GetMousePoint()

if Point then
     Canvas:DrawPixel(Point, Color3.new(1, 0, 0))
    print("Red pixel drawn!")
else
    print("The mouse is not the within the canvas!")
end
Parameters and Returns

Parameters:

This function has no parameters

Returns:

Return Type: Vector2 OR nil
Summary: The point on the canvas at which the mouse is currently at. If the mouse is not on the canvas, nothing will be returned (nil/false)


1 Like

Canvas Drawing Methods:


Canvas:FillCanvas (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:ClearCanvas ()

  • 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:ClearPixels (Points: Table)

  • Works similar to ClearCanvas(), except this function will only clear chosen pixels at the points provided instead of the whole canvas.
    This will go through all the chosen pixels and change their colours to the canvas background colour (Canvas.CanvasColour).
Example
local PointsToClear = {
    Vector2.new(1, 1),
    Vector2.new(70, 70),
    Vector2.new(25, 90),
    Vector2.new(1, 50),
}

Canvas:ClearPixels(PointsToClear)
Parameters and Returns

Parameters:

Points Table

  • Default:
  • Description: The table containing all the pixel points that you wish to clear.

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: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

  • 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: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: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:DrawText (Text: string, Point: Vector2, Colour: Color3, Scale: number?, Wrap: boolean?, Spacing: number?)

  • This method will draw simple text at a desired point on the canvas.

  • 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.

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, Scale: number?, Wrap: boolean?, Spacing: number?)

  • This method will draw simple text at a desired point on the canvas.
  • 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.

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


1 Like

ImageData Methods:


ImageData:GetPixel (Point: Vector2) : Color3, number

  • This method will return the colour and the alpha value from the ImageData from the chosen point relative to the image.
  • NOTE: An image pixel coordinates works the same as the canvas. For example, a 64x64 image starts at 1,1 (top left), and ends at 64, 64 (bottom right)
Example
-- Define the region to capture
local ImageData = Canvas:GetImageData(Gui.Textures["Wall.png"]) -- 128x128 wall texture

-- Grab the middle pixel info of our wall texture
local Colour, Transparency = ImageData:GetPixel(Vector2.new(64, 64))

print("Colour:", Colour) -- Typical Color3 value
print("Alpha:", Transparency) -- A number that ranges from 0 to 255
Parameters and Returns

Parameters:

Point Vector2

  • Default:
  • Description: The desired pixel sample point on the Image.

Returns:

Return Type: tuple
Summary: A tuple containing, in order: A Color3 value of the pixel, and a number value that represents the alpha/transparency value of the pixel


ImageData:GetPixelXY (X: number, Y: number) : Color3, number

  • This method will return the colour and the alpha value from the ImageData from the chosen point relative to the image.
  • NOTE: An image pixel coordinates works the same as the canvas. For example, a 64x64 image starts at 1,1 (top left), and ends at 64, 64 (bottom right)
Example
-- Define the region to capture
local ImageData = Canvas:GetImageData(Gui.Textures["Wall.png"]) -- 128x128 wall texture

-- Grab the middle pixel info of our wall texture
local Colour, Transparency = ImageData:GetPixelXY(64, 64)

print("Colour:", Colour) -- Typical Color3 value
print("Alpha:", Transparency) -- A number that ranges from 0 to 255
Parameters and Returns

Parameters:

X number

  • Default:
  • Description: The desired pixel sample X coordinate on the Image.

Y number

  • Default:
  • Description: The desired pixel sample Y coordinate on the Image.

Returns:

Return Type: tuple
Summary: A tuple containing, in order: A Color3 value of the pixel, and a number value that represents the alpha/transparency value of the pixel


ImageData:Tint (Colour: Color3, T: number)

  • This method will set and blend the original image colours using interpolation with a set colour and percentage.
Example
local ImageData = Canvas:GetImageData(Textures["Wall.png"]) -- Our image

-- Tint the image with 50% black
ImageData:Tint(Color3.new(0, 0, 0), 0.5)

Parameters and Returns

Parameters:

Colour Color3

  • Default:
  • Description: The colour used to interpolate with the image colours.

T number

  • Default:
  • Description: The percentage between 0 and 1 to tint the image by.

Returns:

Return Type: void
Summary: Nothing will be returned (nil)


ImageData:SetPixel (X: number, Y: number, Colour: Color3, Alpha: number?)

  • Sets a given pixel’s colour and alpha value on the ImageData.
  • The X and Y values should be between (1, 1) and (Image Width, Image Height)
  • The alpha value should between 0 and 255
Example
local ImageData = Canvas:GetImageData(Textures["Texture.png"]) -- Our image

-- Set the top left pixel to be green with an opacity of around 50%
ImageData:SetPixel(1, 1, Color3.new(0, 1, 0), 127)
Parameters and Returns

Parameters:

X number

  • Default:
  • Description: The X point that determines what pixel to set the colour and alpha value to.

Y number

  • Default:
  • Description: The Y point that determines what pixel to set the colour and alpha value to.

Colour Color3

  • Default:
  • Description: The colour that you wish to apply.

Alpha number

  • Default:
  • Description: The alpha/transparency value that you wish to apply to the pixel. This value should be between 0 and 255. Leave this parameter blank or set to false if you don’t want to change the alpha value.

Returns:

Return Type: Void
Summary: Nothing will be returned (nil)

1 Like