CanvasDraw 3.0 Update Draft

Bulletin Board
#1

MAJOR UPDATE - v3.0

CanvasDraw 3.0 is finally out! This version of CanvasDraw is very different to CanvasDraw 2.0 and will require some small code adjustments for projects using an older version of CanvasDraw as this version now runs under an object oriented context, which means most of Canvas related functions have been changed to methods.

Now there is much more than that, so let’s start from the top.

Multiple canvases and object-oriented methods!

Yes, that’s right. CanvasDraw is now an object-oriented module, which means you can create multiple canvases and manage them all independently with local canvas methods instead of global module functions.

Here’s an example of multiple canvases being used:

image
image794×502 111 KB

(The canvas at the top left is a GIF player, and the one at the bottom right is a drawing program)

In order for multiple canvases to be possible, I had to replace the CanvasDraw.CreateCanvas() function with a new tradional cunstructor function; CanvasDraw.new() which returns a canvas object

local CanvasDraw = require(script.CanvasDraw)

local CanvasA = CanvasDraw.new(FrameA, Vector2.new(200, 180))
local CanvasB = CanvasDraw.new(FrameB)

CanvasA:DrawPixel(Vector2.new(100, 30), Color3.new(0, 0, 0))

CanvasB:DrawCircle(Vector2.new(50, 50), Color3.new(1, 0, 0))

Now since most CanvasDraw functions have been replaced with Canvas methods, that means you will have to apply some small code changes to projects using a previous version of CanvasDraw.

Thankfully most of this is just renaming variables and replacing the function prefix ‘.’ with a method prefix ‘:’

Here is an example of converting a drawing program that was built with CanvasDraw 2.0:

OLD:

CanvasDraw.CreateCanvas(Frame)

Mouse.Move:Connect(function()
	local MousePoint = CanvasDraw.GetPointFromPoint()
	
	-- Check if we have a valid point on the canvas and the mouse button is being held down
	if MousePoint and MouseDown then 
		-- Draw a line between the last mouse point and the current mouse point to avoid gaps from dragging the mouse too quickly
		if LastMousePoint then
			CanvasDraw.DrawLine(LastMousePoint, MousePoint, DrawColour)
		end
		
		LastMousePoint = MousePoint
	end
end)

Mouse.Button1Down:Connect(function()
	MouseDown = true
	local MousePoint = CanvasDraw.GetPointFromMouse()
	
	-- For those who like dots
	if MousePoint then
		CanvasDraw.DrawPixel(MousePoint, DrawColour)
	end0
end)

Mouse.Button1Up:Connect(function()
	LastMousePoint = nil
	MouseDown = false
end)

NEW:

local Canvas = CanvasDraw.new(Frame)

Mouse.Move:Connect(function()
	local MousePoint = Canvas:GetMousePoint()
	
	-- Check if we have a valid point on the canvas and the mouse button is being held down
	if MousePoint and MouseDown then 
		-- Draw a line between the last mouse point and the current mouse point to avoid gaps from dragging the mouse too quickly
		if LastMousePoint then
			Canvas:DrawLine(LastMousePoint, MousePoint, DrawColour)
		end
		
		LastMousePoint = MousePoint
	end
end)

Mouse.Button1Down:Connect(function()
	MouseDown = true
	local MousePoint = Canvas:GetMousePoint()
	
	-- For those who like dots
	if MousePoint then
		Canvas:DrawPixel(MousePoint, DrawColour)
	end
end)

Mouse.Button1Up:Connect(function()
	LastMousePoint = nil
	MouseDown = false
end)

Yes, not much has changed at all has far as programming with CanvasDraw goes, which means migrating larger projects will hopefully not be an issue!

Now there’s a lot more smaller additions and changes to have also been added to CanvasDraw 3.0, so here’s a list of all the changes and updates:

  • Module updates:
    • Optimised the module and the canvas rendering
    • Optimised DrawImage() and DrawImageXY() when using transparent images
    • Added a quick API lookup in the module’s code as comments
    • Added scale parameters to both DrawImage() and DrawImageXY()
    • Added SurfaceGui support to the GetMousePoint() method (Special thanks to @Krystaltinan and @CoderHusk)
    • Removed CreateCanvas() in favour of CanvasDraw.new()
    • Removed the BlurEnabled parameter in CanvasDraw.new() as this blur feature is quite useless and overall gives a horrible hacky blur effect that uses artefacts from the UIGradients in the pixels
    • Removed GetPoints(), ClearPixels() and FillPixels() as these methods were quite useless and could easily be recreated by the user.
    • Removed DrawDistortedImage() due to poor performance and lack of use. Will soon get replaced with a faster and better DrawSkewedImage() function
    • Renamed GetPointFromMouse() to GetMousePoint()
    • Renamed canvas event Heartbeat to Updated
    • Fixed the canvas AutoUpdate property not working when set to false

Image Importer plugin updates:

  • Fixed the plugin braking from trying to import images when nothing in the explorer is selected.
1 Like