Wpf StreamGeometry unexpected values

Question

I draw some kind of chart like that:

var geometry = new StreamGeometry();

using (var ctx = geometry.Open())
{
    ctx.BeginFigure(new Point(offset, MyCanvas.Height), false, false);

    for (var i = 0; i < interpolated.Count; i++)
    {
        var x = i * partWidth / interpolated.Count + offset;
        ctx.LineTo(new Point(x, MyCanvas.Height - interpolated[i]), true, false);
    }

    ctx.LineTo(new Point(offset + partWidth, MyCanvas.Height), true, false);
    ctx.LineTo(new Point(offset, MyCanvas.Height), true, false);

    geometry.FillRule = FillRule.EvenOdd;
    geometry.Freeze();

    var path = new Path
                {
                    Stroke = Brushes.Black,
                    StrokeThickness = 1,
                    Data = geometry,
                    Fill = Brushes.Black
                };
    MyCanvas.Children.Add(path);
}

All of my values in interpolated[] = 0..40.

My canvas height = 50

This is what I get:

I don't understand, why some points are below the line, that I draw like:

 var zeroLine = new Line
        {
            X1 = 0,
            X2 = 790,
            Y1 = MyCanvas.Height,
            Y2 = MyCanvas.Height,
            Stroke = Brushes.Coral,
            StrokeThickness = 1
        };
        MyCanvas.Children.Add(zeroLine);

If MyCanvas.Height value is more than my data values (that's for sure), than MyCanvas.Height - interpolated[i] as Y should always be less than orange line, right?

As I understand, StreamGeometry draws this parts outside of given points by design? Can prevent this?

Answer 1

It's due to the StrokeLineJoin of the Path, which is Miter by default.

Set it to Round instead:

var path = new Path
{
    Stroke = Brushes.Black,
    StrokeThickness = 1,
    StrokeLineJoin = PenLineJoin.Round,
    Data = geometry
};

---

As a note, instead of a Path with a Geometry consisting of many single lines, you may also use a Polyline element.