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

Resources Community Resources
, , , ,
619

Patch - v4.17.3

  • :DrawTexturedTriangle() and :DrawDistortedImage() now have automatic pixel coordinate rounding
  • Fixed type errors recently appearing in the module due to a roblox update

CanvasDraw4.17.3.rbxm (79.1 KB)

1 Like
620

With 3 beziers a (circle)[https://www.youtube.com/watch?v=WI82p3pMw6s] with a set amount of “openness”, this would allow for loading spinners, etc. Would this be performant with CanvasDraw or am I better off with Path2D instances? If implemented with CanvasDraw how many circles like this could be drawn on screen without performance drop-off?

1 Like
621

Depends on your use case and what you’re going for. If its a simple singular loading icon, path 2D may be better suited for this, or it may not, I haven’t used Path2D before, so im not really familiar with it.

CanvasDraw gives you a lot more flexibility and what you can do with the pixels compared to roblox ui instances. Depending on what you’re going for, this may be a superior option if done right. For an example, if you’re using tons of UIs to achieve a certain effect, CanvasDraw will be a much better solution as it uses a singular texture instance (modifying lots and lots instances is really slow)

CanvasDraw is designed for image processing and fast efficient rendering for graphics (such as for custom game engines, shaders, etc)

Since i dont fully know what scale and detail you’re going for with this, I’d probably experiment with both options and see what benefits you best.

1 Like
624

Patch - v4.17.4

  • Fixed Canvas:DrawImage() erroring when being drawn completely outside the canvas
  • Fixed Canvas:DrawRectangle() erroring when being drawn partially outside the canvas

CanvasDraw4.17.4.rbxm (79.4 KB)

625

I’m trying to scale up the resolution, prob up to 1920x1080, I’m trying to render it 30 or 60 fps during runtime,
Streaming Service like youtube can do 2k 60 fps with buffer and encoder, but idk why the limit is so low (only 1024 pixels) for this, is there a particular reason why it has to be 1024 pixels?

626

Main reason is simply just because EditableImage is limited to 1024x1024. The only real work around is stitching multiple of them together, however you may run into throttling issues trying to update 4 of them in real-time

2 Likes
629

Update - v4.18.0

  • Added a new additive alpha blending mode: CanvasDraw.BlendingModes.AddAlpha
    Particulary useful for transparent canvases!

  • Added ImageData:Flip()

  • Fixed Canvas:DrawCircle() overdraw issues when clipping (was noticeable when transparent)

  • Fixed ImageData:Clone() not doing a proper deep copy of the contents

CanvasDraw4.18.0.rbxm (80.0 KB)

2 Likes
630

Its amazing to see how many updates you do to this and keep up support, how long are you planning to keep it updated it for? and a roadmap and planned ideas you got?

2 Likes
631

Keeping support is the number one thing I prioritise with this module, especially since quite a few games rely on the API and I try do any patches when possible, so it’s the least I can do!

Not sure honestly. I’ve been maintaining this resource singlehandly for 4 years now. I always try to make any improvements when possible, whether that be optimisations, bug fixes, and needed features, which i plan to continue doing for as long as I remain on this platform pretty well

6 Likes
632

How could i make a static-y vignette effect? I tried one solution but it was quite laggy and peformance intensive, so how would i make it in a way that isnt laggy
my solution was to get distance from the center and draw a pixel with the pixel being more transparent the closer it is to the center, with color variations

1 Like
633

Does an ImageLabel not suffice this? Or are you after something more dynamic or to be applied to a canvas?

If you want a plain old static vignette with no special effects, DrawImage() or SetBufferFromImage() is the is the simplest way to do this:

local ImageData = CanvasDraw.GetImageData(SaveObject)
Canvas:SetBufferFromImage(ImageData) -- Image dimensions must match Canvas dimensions

Or if you want to generate a dynamic vignette on the fly, I came up with this very performant solution:

local Width, Height = 32, 32 -- Resolution really does not need to be high at all
local VignetteStrength = 1 -- A multiplier (can be set to any decimal value above 0)

local Canvas = CanvasDraw.new(Frame, Vector2.new(Width, Height), Color3.new(0, 0, 0), true) -- Create a canvas with blurred pixels for cleanest result
--Canvas:SetStretchToFit(true) -- Optional

local MidX = Width * 0.5
local MidY = Height * 0.5
local MaxDist = math.sqrt(MidX * MidX + MidY * MidY)

-- Use this to change the Vignette colour
Canvas:SetClearRGBA(1, 0, 0, 0) -- Red

Canvas.OnRendered:Connect(function()
	if VignetteStrength <= 0 then return end
	
	Canvas:Clear()
	for Y = 1, Height do
		local DY = Y - MidY
		
		for X = 1, Width do
			local DX = X - MidX
			
			local Dist = math.sqrt(DX * DX + DY * DY)
			local Shade = math.clamp(Dist / MaxDist * VignetteStrength, 0, 1)

			Canvas:SetAlpha(X, Y, Shade)
		end
	end
end)

This method will generate a 32x32 canvas with blur enabled to smoothly blend the pixels together without hurting performance. This canvas be can layered directly on top of another canvas. So this is an easy drag and drop solution for any CanvasDraw project. The only thing you’ll have to do is match the canvas position and aspect ratio, which should be quite simple to do:

634

Hey man! im having this problem where the default image gets on the background of my tranparent sprites for some reason

image
image362×234 869 Bytes

635

i need a static-y pixelated vignette which generates basically every frame

636


something like this

637

Try a different blending mode:

Canvas.AlphaBlendingMode = CanvasDraw.BlendingModes.Normal

or

Canvas.AlphaBlendingMode = CanvasDraw.BlendingModes.AddAlpha