Drawing canvas problem

Anyone knows how to make a smooth drawing system?
what I have for now is an edittable mesh that I draw on,

what I do is I draw a line between the mouse current position and to be position for it to be smooth
but the colors are very ugly.

https://gyazo.com/78345db9bab5825199a806a03900d037

Code

mouse.Button1Up:Connect(function()
	connection:Disconnect()
end)
mouse.Button1Down:Connect(function()
	lpos = Vector2.new(mouse.X,mouse.Y)
	connection = mouse.Move:Connect(function()
		local G = Vector2.new(mouse.X,mouse.Y)
		draw_l(lpos,G) -- lpos is last pos, G is mouse pos
		lpos = G
	end)
end)

and for the draw function

local function draw_l(m1,m2)
	local aPosition = script.Parent.ImageLabel.AbsolutePosition
	local aSize = script.Parent.ImageLabel.AbsoluteSize
	local dif = m1 - aPosition
	local mrscale = dif / aSize 

	local pixelPos = mrscale * eimg.Size
	pixelPos = Vector2.new(math.floor(pixelPos.X),math.floor(pixelPos.Y))
	
	local dif2 = m2 - aPosition
	local mrscale2 = dif2 / aSize 

	local pixelPos2 = mrscale2 * eimg.Size
	pixelPos2 = Vector2.new(math.floor(pixelPos2.X),math.floor(pixelPos2.Y))
	-- whats above is to find relative position of the mouse.
	DrawThickLine(pixelPos,pixelPos2,Color3.new(0, 1, 0.635294),0,5) -- a function I found on the devforum
end

and lastly the function I found to draw a thick line


local function DrawThickLine(
	p1: Vector2, p2: Vector2, color: Color3, transparency: number, thickness: number
): ()
	local angle = math.atan2(p2.Y - p1.Y, p2.X - p1.X)

	local side1 = math.ceil(thickness/2)
	local side2 = math.floor(thickness/2)

	for i=-side2, side1, 1 do
		eimg:DrawLine(
			p1 + Vector2.new(
				math.round(i * math.cos(math.pi/2 + angle) - 0 * math.sin(math.pi/2 + angle)),
				math.round(i * math.sin(math.pi/2 + angle) + 0 * math.cos(math.pi/2 + angle))
			),
			p2 + Vector2.new(
				math.round(i * math.cos(math.pi/2 + angle) - 0 * math.sin(math.pi/2 + angle)),
				math.round(i * math.sin(math.pi/2 + angle) + 0 * math.cos(math.pi/2 + angle))
			),
			color, 0,Enum.ImageCombineType.Overwrite
		)
	end
end
3 Likes

Have you looked into CanvasDraw?

1 Like

are there any module that take uses of curve functions to make a drawing system?

1 Like