context2D closePath on arc closes path to centre x point and not to drawn line start

[chinanwu]

I have read and understood the contribution guidelines.

Version: ^2.4.0

The closePath() the context2D seems to be closing on the centre x point of the arc rather than the actual drawn arc line.

Simple example (This can be copied and pasted into the playground https://raw.githack.com/MrRio/jsPDF/master/#):

var doc = new jsPDF();
const canvas = doc.canvas;
const ctx = canvas.getContext('2d')
ctx.beginPath();
ctx.arc(80, 80, 65, 0, Math.PI);
ctx.closePath();
ctx.lineWidth = 6;
ctx.stroke();

Which is grabbed from this page: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/closePath#closing_just_one_sub-path (You can see the correct behaviour here)

Slightly more complex example (can also be copied into the playground):

var doc = new jsPDF();
const canvas = doc.canvas;
const ctx = canvas.getContext('2d')
ctx.beginPath();
ctx.arc(
    106,
    130,
    100,
    -1.5707963267948966,
    -0.3141592653589793,
    false);
ctx.arc(
    106,
    130,
    62.5,
    -0.3141592653589793, 
    -1.5707963267948966, 
    true);
ctx.closePath();
ctx.stroke();

Here is the jsfiddle page for the expected behaviour: https://jsfiddle.net/p7vmqu6r/1/

[Bl4sio]

Hello!
I'd like to work on this issue.

[Bl4sio]

The main problem, is that the closePath function tries to connect to the x, y coordinates of the first drawn object, but the arc method stores the origin as x and y.
In the second example there is an other problem: the arc won't connect the start point to the previous endpoint.
I think the solution should be to call a drawLine to the beginning of the arc.

[Bl4sio]

The results:
Example1:

Example2:

The solution is not perfect, as the connection between the line and the beginning of the arc is ugly.
After further investigation I figured that the fill method isn't working as expected:
Actual:

Expected:

Test code:

var doc = new jsPDF();
const canvas = doc.canvas;
const ctx = canvas.getContext('2d')

ctx.beginPath();
ctx.moveTo(80, 80);
ctx.lineTo(80, 100);
ctx.arc(80, 80, 65, 0, Math.PI * 0.8);
ctx.closePath()
ctx.lineWidth = 6;
ctx.fill()
ctx.stroke();

I belive it should be fixed in an other issue.

[HackbrettXXX]

Thanks for the bug report and the PR. closePath seems to be generally broken, so I'm OK with fixing that in another PR. It seems that closePath doesn't call the PDF close path operator.

Could it be that the fill issue is also related to the "fake closing"?

[Bl4sio]

I don't really know the pdf syntax. But I think this two issue are related.