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

sasial · August 4, 2022, 10:33am

What’s the different between this and GreedyCanvas / GradientCanvas?

Ethanthegrand14 · August 4, 2022, 10:40am

if you read the post, you will see that it can do much more than those modules. This module has way more drawing functions and features for creating games or programs. Some examples:

DrawImage()
DrawTriangle()
DrawLine()
DrawRectangle()
DrawCircle()
GetPixel()
ClearPixels()
FloodFill()
GetPixelFromImage()
GetImageDataFromSaveObject()
And more!

Now don’t get me wrong, i’m not trying to diss Boatbomber’s module. His stuff is amazing. It actually inspired me to make this module!

Think of this module as an extension for GradientCanvas in a way too (since it uses an upgraded version of it internally)

JojogamezYT · August 4, 2022, 1:05pm

nah bro its a nightmare, uploading a 90x50 1 minute gif wass hectic, I had arround 3000 images and i had to bump it down to 300. btw can you show me the script that you use to run that gif? Also did not solve the problem really…

Ethanthegrand14 · August 4, 2022, 9:19pm

3000? Frames jees! I can see your really determined to make actual long videos within CanvasDraw. You know what, ill see what I can do for optimisations on the plugin and hopefully you’ll be able to import images faster

alliedoeihoialt · August 7, 2022, 4:31pm

I got great news! After literally just rewriting the entire script I finally fixed the issue! The issue was very simple. In Lua when you set 2 variables to the same table then they both own the same memory address of that table. So my 2 variables were interfering with each other and ruined everything. In C++ I guess that isn’t the case. I already knew of this problem but since my VectorModule also consisted out of tables and weren’t normal Vector3s, the same memory address got referenced by 2 different variables.

Jamstoe · August 8, 2022, 1:33am

This works better than actual things built for this stuff like love2d, I get like 20 fps running this engine on there, but with this plugin I get a good 60 fps

10/10

edit:

Ethanthegrand14 · August 8, 2022, 4:50am

Wow. Very glad to hear that are enjoying the module. Also love what you are making. Are you making a type of BSP renderer?

Jamstoe · August 8, 2022, 4:53am

Yep! ive been messing around with it most of today, and i plan on adding textures and whatnot

Seuika · August 9, 2022, 7:11pm

Can I get banned from Roblox for this? It’s seems really useful. But i don’t know what roblox think about that. People can use this system for bad purposes, roblox has ban system for this (bad purposes)?

Ethanthegrand14 · August 9, 2022, 8:43pm

Im pretty sure an engine within roblox itself doesn’t break TOS.

Also people can make bad stuff with the normal roblox engine anyways

Just as long as your aren’t breaking general roblox laws, you should be more than fine

intykat · August 23, 2022, 7:45pm

You always make the coolest stuff Ethan. This is gonna be really cool to play with.

davidslevs · August 30, 2022, 8:52am

I absolutely love you for this. I’ve been checking out your other work too, it’s awesome. The best thing about this, is that it’s probably more optimized than i could ever make.

Time to make some falling sand and physics games!!! A lot is possible with this.

Ethanthegrand14 · September 16, 2022, 6:52am

Update - v2.6.0

This update contains some more optimisations, some new drawing functions and an update to the CanvasDraw Image Importer plugin!

Large Optimisations for Image Functions

CanvasDraw has received a bunch of optimisations to help CanvasDraw draw and sample images pixel data much quicker than before. The following image-based functions that have received major improvements are:
- GetPixelFromImage()
- GetPixelFromImageXY()
- DrawImage()
- DrawImageXY()
- GetImageDataFromSaveObject()
The overall canvas rendering has also been further optimised a bit too

New DrawText Functions

There are two new functions for drawing simple text onto the canvas
- DrawText()
- DrawTextXY()
These functions allow you to set simple pixel text to canvas which can come in real handy for layering when drawing and rendering your game.
DrawText also has some pretty useful features too, which are:
- Text scaling - A multiplier for the size of the text. By default, text’s characters have a resolution of 3x5. So if you have a larger canvas, the text will be smaller. So you may want to double or triple the size of your text with this parameter in some cases.
- Text wrapping - A feature that can be enabled or disabled in the parameters which determines if text should wrap, or cut off it it will end up being too long for the canvas.
- Multiple lines - You can declare multiple new lines for a single text within the Text parameter by typing \n in your text string to place new lines.
Things to note:
- There are no lower case letters. This limitation is due to the small resolutions of the text characters.
- Most uncommon text characters and symbols are not featured in CanvasDraw text. Again, this is mostly due to the small resolution limit of text.
  All though all symbols and characters on a common computer keyboard should be usable in CanvasDraw text.

DrawText code sample:

CanvasDraw.CreateCanvas(CanvasFrame, Vector2.new(100, 100))

CanvasDraw.DrawText(
	"first line \n second line!",  -- The text to display (the '\n' means new line)
	Vector2.new(5, 5),  -- Text position
	Color3.new(0, 0, 0),  -- Text colour
	2, -- Text scale
    true, -- Text wrap in canvas if too long
    2 -- Text spacing in pixels
)

New Image Importer Plugin Features

The CanvasDraw Image Importer plugin has received a few simple but very useful updates.
These new features contains the following:
- An Estimated Time Left text label that will accurately determine how long it will take to mass import all of your images.
- A Total Size text label that shows current total file size of your SaveObjects being created.

Pokemoncraft5290 · September 20, 2022, 2:40am

Extremely nitpicky thing, but don’t we usually use \n for a new line? Why is /n being used?

Ethanthegrand14 · September 20, 2022, 2:45am

Oh, thank you for pointing that out. I didn’t realize \n was the common practical way of declaring a new line in most programs. I have updated the module again and changed the new line identifier to use the backwards slash instead.

Instance_Brick · October 1, 2022, 6:32pm

Please add the ability to create multiple canvases it would help out my current project a ton!

Ethanthegrand14 · October 2, 2022, 1:08am

Multiple canvases is a planned update, but it will require me to rewrite the module so it can fit an object oriented context, but it shouldn’t be too hard to make. Expect to see this in the next update!

Instance_Brick · October 2, 2022, 10:06pm

Awesome, it’ll be a great help thanks!

Ethanthegrand14 · November 14, 2022, 11:56pm

MAJOR UPDATE - v3.0

This update is long overdue, but 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:

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

Also, here you go @Instance_Brick

Instance_Brick · November 15, 2022, 2:14am

Thank you for this, this will be very helpful!