I am trying to create a simple way to draw on a frame when the player holds their mouse down. I am creating a frame every time the mouse is moved but just doing that will look very blocky. Because of that, I need to connect a frame from the first frame drawn to the next frame. That is the part I am having trouble with. I am able to get the correct position and length of the frame but I cannot figure out why the rotation is incorrect. I am using the formula I read on this post.

mouse.Move:Connect(function()
	if mouseDown then
		local point = Instance.new("Frame")
		point.Parent = canvas
		point.Name = "Point"
		point.AnchorPoint = Vector2.new(.5, .5)
		point.Position = UDim2.new(0, mouse.X, 0, mouse.Y)
		point.Size = UDim2.new(.01, 0, .01, 0)
		point.SizeConstraint = Enum.SizeConstraint.RelativeXX
		point.BorderSizePixel = 0
		point.BackgroundColor3 = Color3.fromRGB(0, 0, 0)
		
		if not prevPoint then
			prevPoint = point
			return
		end
		
		local x1 = prevPoint.Position.X.Offset
		local y1 = prevPoint.Position.Y.Offset
		local x2 = point.Position.X.Offset
		local y2 = point.Position.Y.Offset
		
		local length = math.sqrt(math.pow(x2 - x1, 2) + math.pow(y2 - y1, 2)) -- Gets the distance from one point to the other
		local position = Vector2.new((x1 + x2) / 2, (y1 + y2) / 2) -- Gets the midpoint between the two points
		local rotation = (math.min(y1, y2) - math.max(y1, y2)) / length -- Sin(A) = O/H where A is the rotation of the line
		rotation = math.deg(math.asin(rotation))
		
		-- Create connector to connect the previous point to the new point
		local connector = Instance.new("Frame")
		connector.Parent = canvas
		connector.Name = "Connector"
		connector.BorderSizePixel = 0
		connector.BackgroundColor3 = Color3.fromRGB(0, 0, 0)
		connector.AnchorPoint = Vector2.new(.5, .5)
		connector.SizeConstraint = Enum.SizeConstraint.RelativeXX
		connector.Size = UDim2.new(0, length, .01, 0)
		connector.Position = UDim2.new(0, position.X, 0, position.Y)
		connector.Rotation = rotation
		
		prevPoint = point
	end
end)