Draw bezier curve with Fabric.js

Question

I want to draw Bezier, Used Fabric.js Path method, The question is Path will connect the beginning to the end, But I don't want to do that.

Answer 1

For your question that Path will connect the beginning to the end.

Yes it will connect.

But I don't want to do that.

Though there is nothing as of now using which you can avoid this behavior. But yes there is a workaround using which your path wont look as if the beginning and end are joined. See the demo below. There are two paths one which shows the beginning and end joined(the triangle). Second where the end and beginning do not appear to be joined(the arrow). The difference between these two is just the fill property set to false in the second path i.e The arrow. But if you omit the fill property or set it to some color it will look as similar to the first path(triangle) with joint end and beginning. Hence you can create a bezier curve as required by you.

// initialize fabric canvas and assign to global windows object for debug
var canvas = window._canvas = new fabric.Canvas('c');
//var canvas = new fabric.StaticCanvas('c');
var path = new fabric.Path('C 50 50 100 100 150 50 C 200 100 250 50 300 100', {
left: 100,
top: 50,
stroke: 'red',
strokeWidth: 1,
fill: false,
scaleY:3
});
canvas.add(path);


var p = new fabric.Path('C 50 50 100 100 150 50 C 200 100 250 50 300 100',{
  left: 200,
  top: 60,
  strokeWidth:2,
  scaleY:3
});

canvas.add(p);

<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="600" height="600"></canvas>

Hope it helps :)

UPDATE

Fiddle

Above is the fiddle link in this you will see two paths being created and the third one is not getting created because the path string passed is not valid.

Also can you please create a demo in fiddle with the actual problem you are facing. Would be easy for me to help and understand the issue.