# GraphicsPath experimental playground

Hi,
I’m playing around with the GraphicsPath class and trying to translate sample source code from the Mozilla site. I have the following code (https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) and translated it to Xojo. Unfortunately the results differ (see picture).

Java

[code]for (var i = 0; i < 4; i++) {
for (var j = 0; j < 3; j++) {
ctx.beginPath();
var x = 25 + j * 50; // x coordinate
var y = 25 + i * 50; // y coordinate
var startAngle = 0; // Starting point on circle
var endAngle = Math.PI + (Math.PI * j) / 2; // End point on circle
var anticlockwise = i % 2 !== 0; // clockwise or anticlockwise

``````ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

if (i > 1) {
ctx.fill();
} else {
ctx.stroke();
}
``````

}
}[/code]
Xojo

[code]Const kPi = 3.1415926535

Var path As GraphicsPath
Var x, y, radius, startAngle, endAngle As Double
Var anticlockwise As Boolean

startAngle = 0 // Starting point on circle

g.DrawingColor = Color.TextColor

For i As Integer = 0 To 3

For j As Integer = 0 To 2

``````path = New GraphicsPath

x = 25 + j * 50 // x coordinate
y = 25 + i * 50 // y coordinate
endAngle = kPi + (kPi * j) / 2 // End point on circle
anticlockwise = i Mod 2 <> 0 // clockwise or anticlockwise

If (i > 1) Then
g.FillPath(path)
Else
g.DrawPath(path)
End If
``````

Next

Next[/code]

I think that Xojo is right.
Arc with startAngle = 0, endAngle = 2 x Pi and anticlockwise = False is a full circle.
So, arc with startAngle = 0, endAngle = 2 x Pi and anticlockwise = TRUE is empty.
Try for example :

``endAngle = kPi + (kPi * j) / 2 - 0.3``

To see the difference between anticlockwise = False and anticlockwise = True

Thanks Eric - Hmm, that doesn’t really give me back the desired result. Does the algorithm need to be modified elsewhere?

Change:

``Const kPi = 3.1415926535``

to

``Const kPi = 3.141592653589793``

@Martin_T how did this work for you? I am trying to do the math to draw a donut.

Thanks!

What do you mean?

Were you able to get this to work to your satisfaction?

``````Const kPi = 3.141592653589793

Var path As GraphicsPath
Var x, y, radius, startAngle, endAngle As Double
Var anticlockwise As Boolean

startAngle = 0 // Starting point on circle

g.DrawingColor = Color.Red

For i As Integer = 0 To 3

For j As Integer = 0 To 2

path = New GraphicsPath

x = 25 + j * 50 // x coordinate
y = 25 + i * 50 // y coordinate
endAngle = kPi + (kPi * j) / 2 // End point on circle
anticlockwise = i Mod 2 <> 0 // clockwise or anticlockwise

If (i > 1) Then

g.FillPath(path)

Else

g.DrawPath(path)

End If

Next

Next
``````
1 Like