CanvasDraw - A powerful pixel-based graphics library (Draw pixels, lines, triangles, read/modify image data, and much more!)

change_mom · December 23, 2024, 4:36pm

got inspired by bluebxrrybot’s Mandelbrot Set and tried to recreate Julia Set with canvas draw

demilo1935 · December 24, 2024, 5:29pm

I have a question. i send the image data to the server:

local ImageData = Canvas:CreateImageDataFromCanvas(Vector2.new(0,0), Vector2.new(100, 100))
local SaveObject = CanvasDraw.CreateSaveObject(ImageData)
SaveObject.Name = "MyDrawing"
SaveObject.Parent = script.Folder
		
local canvasData = script.Folder.MyDrawing:FindFirstChild("Chunk1").Value

Then the server collects all the players created drawings and then i wanna load all the drawings that all the players have created for a draw game to see who made the best drawing:

GetDrawData.OnClientEvent:Connect(function(canvasData, WorstOrBest)
	for each, canvasDataNew in pairs(canvasData) do		
		local clonedCanvas = script.Canvas:Clone()
		clonedCanvas.Parent = game.Players.LocalPlayer.PlayerGui.GUI.ImageFrames
		clonedCanvas.Name = canvasDataNew.Player.Name

		if canvasDataNew.Player.Name == game.Players.LocalPlayer.Name then
			clonedCanvas.Visible = false
		end

		-- Initialize the canvas (if necessary)
		local CanvasInstance = CanvasDrawModule.new(clonedCanvas.Canvas)

		local MyDrawing = Instance.new("Folder", script.Folder)
		MyDrawing.Name = "MyDrawing"
		MyDrawing:SetAttribute("Resolution", Vector2.new(100, 100))

		local LoadData = Instance.new("StringValue", MyDrawing)
		LoadData.Value = canvasDataNew.CanvasData
		LoadData.Name = "Chunk1"

		print(LoadData.Value)

		local ImageData = CanvasDrawModule.GetImageData(MyDrawing)
		CanvasInstance:DrawImage(ImageData, Vector2.new(0, 0))

		MyDrawing:Destroy()
	end
end)

But for some reason. the drawings only load 75% of the time. Does anyone know the cause of this?

Ethanthegrand14 · December 26, 2024, 10:54pm

Not really sure why, it could due to your method of storing the data and relying on re-creating the save instances. How come you aren’t using something more suitable such as CanvasDraw.CompressImageData() for storing the drawings?

All though I don’t see why your current method wouldn’t work

DukeAunarky · December 27, 2024, 12:02pm

I have found a bug.

at line 18, it does :GetChildren() to iterate over the StringValues. However, There’s a chance where :GetChildren() returns {Chunk2, Chunk1} instead of the ordered pair. The fix would be to either sort the Children using table.sort, or (more efficiently) use #StringValues inside an for i loop

Ethanthegrand14 · December 27, 2024, 12:15pm

Oh, thank you so much for pointing that out. I’ll be sure to fix that. Im not sure why I never ordered it

demilo1935 · December 27, 2024, 1:31pm

Ah didn’t notice that one. But now i’ve added that one in my code but i keep getting the error: Buffer expected, got table.

How i get the the compression:

local function GenerateImageData(Canvas)
	local topLeft = Vector2.new(0, 0) -- Start position on the canvas
	local bottomRight = ResolutionSize -- Full canvas size
	local ImageData = Canvas:CreateImageDataFromCanvas(topLeft, bottomRight) -- Adjust if needed
	return ImageData
end

local ImageData = GenerateImageData(Canvas)
	if ImageData then
		-- Compress the ImageData
		local CompressedData = CanvasDraw.CompressImageData(ImageData)

		-- Send the compressed data to the server
		game.ReplicatedStorage.Remotes.CollectDrawings:FireServer(CompressedData)
	else
		warn("Failed to generate ImageData.")
	end

Server:

local CollectedPaintingData = {}

repStorage.Remotes.CollectDrawings.OnServerEvent:Connect(function(player, canvasData)
	table.insert(CollectedPaintingData, {
		Player = player,        -- Store the player
		CanvasData = canvasData -- Store the canvas data
	})
end)

And then send that back to client:

GetDrawData.OnClientEvent:Connect(function(canvasData, WorstOrBest)
for each, canvasDataNew in pairs(canvasData) do	
    local CanvasInstance = CanvasDrawModule.new(clonedCanvas.Canvas)
	
    -- Prepare data for decompression
    local ImageData = CanvasDrawModule.DecompressImageData(canvasDataNew.CanvasData)
    CanvasInstance:DrawImage(ImageData)
end

I checked everything but i am not sure what else to do.

trtman33 · December 28, 2024, 12:34am

I just have to say, whatever game you are making right there looks AWESOME!!

Ethanthegrand14 · December 31, 2024, 12:06am

Large Update - v4.12.0

Hey all. Lot’s of big changes this update! Let’s start with the biggest:

Canvas Alpha Blending Modes

Yes, that’s right! You can now finally control how draw methods alpha blend with the canvas!

This means you can finally do stuff such as rendering shapes or images onto a completely transparent canvas by changing the blending mode!

This can be done like so;

-- Ignores the destination pixels and doesn't perform any blending
Canvas.AlphaBlendingMode = CanvasDraw.BlendingModes.Replace

-- Current default blending behaviour
Canvas.AlphaBlendingMode = CanvasDraw.BlendingModes.Normal

-- Or alternatively;

Canvas.AlphaBlendingMode = 1 -- Replace
Canvas.AlphaBlendingMode = 0 -- Normal [Default]

Currently, there are only 2 blending modes

Normal (Default)
Replace

Here’s an example of differences between the two modes.

This is a 200x200 transparent canvas with red triangle, an image with transparency, and text in that order:

Canvas.AlphaBlendingMode = CanvasDraw.BlendingModes.Normal

Canvas.AlphaBlendingMode = CanvasDraw.BlendingModes.Replace

As you can see, with the ‘Replace’ mode, you can draw on Transparent canvases! This is also very useful for masking effects with images or shapes.

This new canvas property affects the following draw methods

Canvas:DrawCircle()
Canvas:DrawRectangle()
Canvas:DrawTriangle()
Canvas:DrawLine()
Canvas:DrawText()
Canvas:DrawImage()
Canvas:DrawTexturedTriangle()
Canvas:DrawDistortedImage()
Canvas:DrawImageRect()
Canvas:DrawRotatedImage()
Canvas:FloodFill()

along with the XY equivalents

Optional Alpha Parameter for Shapes

This is one that many people have suggested in the past, and I am happy to announce that we finally have a new alpha parameter on the following draw methods along with their XY equivalents:

Canvas:DrawCircle()
Canvas:DrawRectangle()
Canvas:DrawTriangle()
Canvas:FloodFill()
Canvas:Fill()

Currently, Canvas:DrawLine() does not have this parameter due to the complexity and overdraw that occurs when rendering a line with thickness. This may change in the future however!

Replacement for Returning Point Arrays from Shapes Methods

This change was overdue as using the non XY equivelant methods for drawing is really slow as Vector and table construction would occur for every drawn pixel.

This has been removed from those draw methods and replaced with new Canvas:Get<Shape>Point methods!

local LinePoints = Canvas:GetLinePoints(PointA, PointB, Thickness, RoundedCaps)

local CirclePoints = Canvas:GetCirclePoints(Point, Radius, Fill)

local RectanglePoints = Canvas:GetRectanglePoints(PointA, PointB, Fill)

local TrianglePoints = Canvas:GetTrianglePoints(PointA, PointB, PointC, Fill)

Migrating any older projects that may rely on the previous behavior is quite simple!

local TriPoints = Canvas:DrawTriangle(PointA, PointB, PointC, Colour, Fill)

-- REPLACE WITH

local TriPoints = Canvas:GetTrianglePoints(PointA, PointB, PointC, Fill)
Canvas:DrawTriangle(PointA, PointB, PointC, Colour, Fill) -- Only do this if you have to draw the triangle as well

The rest of the changes can be seen in the following patch notes here:

Added Canvas:SetRGBA() and Canvas:GetRGBA()
Added Canvas:SetBlur()
Added canvas alpha blending options to allow for shapes and certain draw methods to blend with canvas transparency differently.
This property will affect the following methods:
- Canvas:DrawCircle()
- Canvas:DrawRectangle()
- Canvas:DrawTriangle()
- Canvas:DrawLine()
- Canvas:DrawText()
- Canvas:DrawImage()
- Canvas:DrawTexturedTriangle()
- Canvas:DrawDistortedImage()
- Canvas:DrawImageRect()
- Canvas:DrawRotatedImage()
- Canvas:FloodFill()
Added Canvas:FillRGBA()
Added Canvas:SetBufferFromImage(). A super fast alternative to Canvas:DrawImage()
Added a new optional HorizontalAlignment parameter to Canvas:DrawText()
Added an optional alpha parameter to the following draw methods:
- Canvas:DrawCircle()
- Canvas:DrawRectangle()
- Canvas:DrawTriangle()
- Canvas:FloodFill()
- Canvas:Fill()
Added shape pixel point fetch methods:
- Canvas:GetCirclePoints()
- Canvas:GetLinePoints()
- Canvas:GetRectanglePoints()
- Canvas:GetTrianglePoints()
Added an optional canvas framerate limit property for auto rendering (Canvas.AutoRenderFpsLimit)
Rewrote filled circle algorithm to avoid overdraw
Rewrote filled triangle algorithm to avoid overdraw
Improved accuracy for thick lines with round end caps
Optimised CanvasDraw.CreateBlankImageData()
Optimised Canvas:Fill()
Optimised Canvas:SetClearRGBA()
Fixed a chunk issue when reading SaveObjects
Canvas:DrawImage() will now have it’s optional TransparencyEnabled paramter as true by default if omitted or set to nil.
Canvas:DrawCircle(), Canvas:DrawRectangle(), Canvas:DrawTriangle(), Canvas:DrawLine() and Canvas:FloodFill() no longer return an array of Vectors.
Use the new Canvas:Get<Shape>Points for new work
Removed the old deprecated method Canvas:SetFPSLimit()
Removed the old deprecated property Canvas.AutoUpdate
Deprecated Canvas:DrawPixel(). Use Canvas:SetRGB() for new work!

Other changes:

The main post has been updated in the Limitations section to help users address EditableImage limits
For those who want to use CanvasDraw v2.0.0 to v3.4.1, a CanvasDraw Legacy Image Importer plugin has been made as the modern importer has a different format that is not compatible with older CanvasDraw versions.

CanvasDraw has also recently just turned 3 years old!

Special thanks to @EatSleepCodeRepeat for contributing some of these ideas!

CanvasDraw4.12.0.rbxm (72.5 KB)

DukeAunarky · January 2, 2025, 2:20pm

Another phenomenal update Ethan!

Ethanthegrand14 · January 5, 2025, 2:39am

Optimisation Update + Official Discord - v4.13.0

Hey all! This update consists mostly of some optimisations. CanvasDraw also now has an official community discord server!

Here is a list of all the module changes:

Optimised all pixel set and get methods
Added Canvas:SetU32() and Canvas:GetU32(). Intended to be used internally, but may be useful to some developers
Added ImageData:SetU32() and ImageData:GetU32(). Intended to be used internally, but may be useful to some developers
Canvas:SetRGBA() is now 1.4x faster
Canvas:Fill() is now 2x faster
Canvas:SetClearRGBA() is now 3x faster. This also affects CanvasDraw.new()
The following methods will now get a large performance boost of approximately 1.3x to 1.5x when Canvas.AlphaBlendingMode is set to ‘Replace’:
- Canvas:DrawImage()
- Canvas:DrawImageRect()
- Canvas:DrawDistortedImage()
- Canvas:DrawRectangle()
- Canvas:DrawCircle()
- Canvas:DrawLine()
- Canvas:DrawTriangle()
- Canvas:FloodFill()
- Canvas:DrawText()
Fixed a minor inconsistency issue when checking alpha values on certain drawing methods

CanvasDraw4.13.0.rbxm (72.8 KB)

Special thanks to @davidslevs!

Ethanthegrand14 · January 7, 2025, 4:01am

Patch - v4.13.1

Heavily optimised Canvas:FloodFill(). This method should be now approximately 4-5 times faster!
Special thanks to @DukeAunarky
Fixed Canvas:DrawImageRect() when using a transparent texture.
Fixes slight rendering problems under specific scenarios and erroring when the alpha parameter is left empty with Canvas:DrawTriangle()

CanvasDraw4.13.1.rbxm (73.8 KB)