I’m pretty lost at the
by calling
CanvasDraw.new()and providing a GUI with a frame to contain the canvas.
Where am I supposed to call, what is even calling referring to?
1 Like
calling the function. In programming, calling a function refers to running it.
function Test() -- The function
-- Code goes here
end
-- Calling it (executes the function and the contained code
Test()
1 Like
Just finished making a ray marching engine with this, uncopylocked in case anyone wants to modify it
4 Likes
Studio only beta release update!
This new version of CanvasDraw will only work on Roblox Studio with the EditableImage/Mesh beta feature enabled. Until EditableImage is fully released, this will not work on the regular roblox client!
CanvasDraw 4.0 is here early! and faster than ever before!
CanvasDraw was released on Janurary of 2022, which was two years ago.
Since then, a lot has improved. But none of these improvements are great as the update you’ve all been waiting for. CanvasDraw 4.0!
Say goodbye to lag and framerate issues, and say hello to high resolution projects and games!
My raycaster engine running 60+ FPS at 320x320
This update completely scraps the old internal UIGradient based canvas system by @boatbomber in favour for the new EditableImage instance!
This alone paired up with native luau code generation, has sped up the rendering process up to 10 times!
Also, the resolution limit is now basically gone! You can now make canvases as large as 1024x1024 pixels!
This is a simple paint system I made that runs basically lag free at 1024x512
Pixel transparency support and optimised drawing methods
Most of CanvasDraw’s drawing methods for shapes, textured polygons, lines, images, etc, now use pure RGBA values instead of using a Color3 object, which ofc, contains a lot of unnecessary information and computational methods that we almost never use in the engine.
And yes, that’s right. The canvas can now support transparent pixels along with new super fast per-pixel methods!
Canvas:SetRGB(X, Y, R, G, B) -- Super fast set RGB method
Canvas:SetAlpha(X, Y, 0.5) -- Half transparent (also super fast)
Extract ImageData from roblox TextureIDs!
Yep, you heard me! we can now extract an ImageData object from roblox TextureIDs. This means we can now work with pixels from images as large as 1024x1024, which is roblox’s texture size limit!
Using the advanced DrawDistortedImage() method on a 720x512 canvas at 30 FPS, which is really damn good.
Only downside to this compared to the SaveObject based method, is that this new method yeilds as we have to fetch a roblox online asset.
-- [New method: yeilds, but can go up to 1024x1024]
local ImageData = CanvasDraw.GetImageDataFromTextureId("rbxassetid://1346999791")
-- [Previois method: doesn't yeild and loads instantly, but can only go up to 256x256]
local ImageData = CanvasDraw.GetImageData(SaveObject)
New Built-in Image Editor!
A brand new built-in sprite/image editor tool has been created and added to the official CanvasDraw Tools plugin!
You can use the Image Editor to quickly import SaveObjects and PNG images, and edit them with a drawing canvas with transparency support. You can also export these images as SaveObjects for CanvasDraw!
A few methods and properties have been renamed
This core system and naming convention for the module is pretty well almost unchanged, but this version has renamed some commonly used methods to be shorter and easier to work with and understand for new users.
To migrate any existing pre-4.0 CanvasDraw projects, you may have to rename a few methods and properties.
Here’s all the renamed properties/methods:
- Canvas.AutoUpdate() → Canvas.AutoRender()
- Canvas:Update() → Canvas:Render()
- Canvas:DestroyCanvas() → Canvas:Destroy()
- Canvas:FillCanvas() → Canvas:Fill()
- Canvas:ClearCanvas() → Canvas:Clear()
And more!
Here’s the full changelog for CanvasDraw 4.0!
-
CanvasDraw now runs on EditableImage and can now run up to 10x faster than before!
-
Pixel transparency support
-
Added native luau code generation which almost doubles the performance
-
Added an optional ‘Blur’ parmeter to CanvasDraw.new()
-
Added an optional ‘RoundedCaps’ parameter to Canvas:DrawLine() and Canvas:DrawLineXY() to disable the rounded ends on thick lines
-
Added an optional ‘Alpha’ parameter to Canvas:FloodFill() and Canvas:FloodFillXY()
-
Added a grid overlay to the canvas that can be enabled with ‘Canvas.GridTransparency’. The colour can also be changed with ‘Canvas.GridColour’
-
Added SetRGB(), SetAlpha(), GetRGB() and GetAlpha() canvas pixel methods, which are the new fastest alternatives.
-
Added SetRGB(), SetAlpha(), TintRGB(), GetRGB() and GetAlpha() ImageData pixel methods
-
Added Canvas:MouseIsOnTop()
-
Added Canvas:SetFPS() to limit the FPS of the canvas auto render. 60 by default.
-
Added ImageData:Clone()
-
Added CanvasDraw.CreateBlankImageData()
-
Added CanvasDraw.GetImageDataFromTextureId(). A higher resolution alternative to SaveObjects, with a downside of this method yielding.
-
Added Canvas.EditableImage for direct access to the EditableImage and its API
-
Added Canvas.FpsLimit property [READ ONLY]
-
Added Canvas.AutoRender property [This replaces Canvas.AutoUpdate which is now deprecated]
-
Added Canvas.OnRendered event [This replaced the now deprecated Canvas.Updated event]
-
Gave the DrawCircle and DrawCircleXY methods clipping to the canvas.
-
Gave the DrawTriangle and DrawTriangleXY methods clipping to the canvas.
-
Gave the DrawLine and DrawLineXY methods clipping to the canvas.
-
Renamed Canvas.AutoUpdate to Canvas.AutoRender (AutoUpdate will still exist, but is now deprecated)
-
Renamed Canvas:Update() to Canvas:Render()
-
Renamed Canvas:DestroyCanvas() to Canvas:Destroy()
-
Renamed Canvas:FillCanvas() to Canvas:Fill()
-
Renamed Canvas:ClearCanvas() to Canvas:Clear()
-
Deprecated the Canvas.AutoUpdate property in favour of the RunService.Heartbeat event and the Canvas.AutoRender property
-
Deprecated the Canvas.Updated event in favour of the RunService.Heartbeat and Canvas.OnRendered events
-
ImageData pixel fetch methods with alpha values now use a number range of 0 - 1 instead of 0 - 255
-
Fixed Canvas:GetMousePoint() not working correctly with SurfaceGui
-
Canvas:GetMousePoint() is now compatible with plugins
25 Likes
Very happy to see my old canvas stuff is no longer necessary! Roblox is moving forward.
3 Likes
Also, isn’t it possible to expand the resolution limit by using multiple EditableImages?
1 Like
Yeah, it is, but I honestly don’t think there’s a logical reason why anyone would want to use a resolution greater than 1024x1024.
Creating a 1024x1024 blank image already has a slight frame rate drop, let alone running a rendering engine.
But, if there’s enough demand, or even a contribution, there’s a chance it may be implemented anyways.
3 Likes
I will be using a 1080p horizontal canvas in the future, which is 1920x1080 and over 1024x1024.
My question is why do you need full resolution? couldn’t you get away it being downscaled to 1024x576 with blur enabled, or is there a specific reason why it would be required?
1 Like
When I try using DrawTriangle to draw a filled triangle, it just doesn’t fill the triangle
Oh it doesn’t? That’s odd. What version are using? It seems to work fine on both latest releases (v4.0.0 and v3.4.1)
Canvas:DrawTriangle(CornerA, CornerB, CornerC, Color3.new(1, 0, 0), true)
I’m using the latest version, and I’m not passing the fill parameter, but it doesn’t work with it either
Canvas:DrawTriangle(screenPositions.topFrontRight,screenPositions.bottomFrontRight,screenPositions.topFrontLeft,color)
What are the screenPosition things?
What do the coordinates look like? And also what is the canvas resolution?
Also what version of the module are you using? That’s probably the most important part
Canvas resolution is 215x100 and screenPositions are screen positions of corners of a part
hmm, are they vector2 values with rounded/floored numbers?
And also they have to be within the resolution of the canvas, which they look like they are.
They are and I can try rounding the values since they aren’t (I think)
Most of the rasterisation methods need rounded or floored values since we are working with pixels, and pixel coordinates dont have a decimal
Yep it works now, thanks!
limit aaaaaaaaaaaaaaaa
1 Like
Patch - v4.0.1.b
-
Fixed some canvas clipping issues related with the canvas DrawCircle/DrawCircleXY method.
-
Fixed Canvas:GetMousePoint() not working correctly with SuraceGUIs
(turns out my last fix didn’t work). -
Other minor bug fixes.
