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.


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.moveTo(p1.x, p1.y);
    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
    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";
<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:

enter image description here

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.