Nov 20, 2022

# Solution 1 :

Without code it is hard to know what you want or what you may be doing wrong. But filling the area between curves just needs the call to `fill` once you have defined the path.

Example

``````const ctx = canvas.getContext("2d");
const unit = (a, b, u) => (b - a) * u + a;
const p1 = {x:20, y:420}, p2 = {x:480, y:20}, p3 = {x:20, y:480};
ctx.beginPath()
ctx.moveTo(p1.x, p1.y);
ctx.bezierCurveTo(
unit(p1.x, p2.x, 0.5), unit(p1.y, p2.y, 0.0),
unit(p1.x, p2.x, 0.5), unit(p1.y, p2.y, 1.0),
p2.x, p2.y
)
ctx.bezierCurveTo(
unit(p2.x, p3.x, 0.5), unit(p2.y, p3.y, 0.0),
unit(p2.x, p3.x, 0.5), unit(p2.y, p3.y, 1.0),
p3.x, p3.y
)
ctx.lineWidth = 3;
ctx.lineJoin = "round";
ctx.strokeStyle = "#F80";
ctx.fillStyle = "#08F";
ctx.fill();
ctx.stroke();``````
``<canvas id="canvas" width="500" height="500"></canvas>``

# Problem :

I want to connect to points with two slightly offset curved lines (bezier curve) and fill the area inside. The last step is missing in the following picture:

I have difficulties to find the right way forward, because it seems that you can’t close the path and fill it with `ctx.fill()` very easily.

I would appreciate a lot to hear any good approach for this problem! Thanks!

### Comment posted by Take

thank you a lot, that’s exactly what I was looking for! I tried a similar approach before, but I guess I didn’t exactly close the path at the exactly correct point. At least this is the best explanation I have right now.