I have the start and end points and the values of the slope of the curve at those points. Now I have to draw a "smooth 2D bezier curve" through the two given points. Now how to locate the two control points to achieve this. Is there any way for it? I know that the control points must lie on the tangents at the respective start and end points.
It sounds like you have catmull-rom curve coordinates (two points, and their departure and arrival tangents), in which case https://pomax.github.io/bezierinfo/#catmullconv covers all the math necessary to convert those to Bezier coordinates. And if you don't care about the "how", just skip to the end of the section for the straight up conversion rules.
tl;dr version: rewrite your coordinates to Catmull form:
[P1, v1, v2, P2] -> [P1 - v1, P1, P2, P2 + v2]
Then we convert that to Bezier coordinates:
P1 <= P1
p2 <= P1 - (P2 - P1 - v1) / 6 * f
p3 <= P2 + (P2 + v2 - P1) / 6 * f
p4 <= P2
the f is a tension constant. Play around with that. It's usually 1, but it might not be depending on how strong those tangents were.
For a cubic Bezier curve defined by P0, P1, P2 and P3 where P0 and P3 are the start point and end point, its first derivative vector at t=0 and t=1 are
C'(t=0) = 3*(P1-P0)
C'(t=1) = 3*(P3-P2)
So, if you already know the slope at the start and end point, you can easily convert that to tangent vectors and find the control points P1 and P2. You do need to assign a proper magnitude for the first derivative vectors so that the final resulting curve does not have inflection point. But as long as you make sure the resulting control polygon formed by P0, P1, P2 and P3 are convex, then your cubic Bezier curve should be smooth and has no turnnings.
