title: QML Canvas skips path segments when using arcTo with non-zero radius
body: <p>I am trying to paint a simple shape with the QML <code>Canvas</code> element. To give the shape rounded edges without having to do manual trigonometry I am using the <code>arcTo</code> function. But for some reason <code>arcTo</code> with a non-zero radius skips some segments. The exact result depends on radius, width, and height. The result is always correct when using a zero radius.</p>
  <p>The result is always one of the following and it is always consistent for a given set of parameters. The behaviour is present in both Qt 5 and 6.</p>
  <ul>
  <li><a href="https://i.stack.imgur.com/zX7w2.png" rel="nofollow noreferrer">Correct</a></li>
  <li><a href="https://i.stack.imgur.com/OacxB.png" rel="nofollow noreferrer">Fail state #1</a></li>
  <li><a href="https://i.stack.imgur.com/3Y5C8.png" rel="nofollow noreferrer">Fail state #2</a></li>
  <li><a href="https://i.stack.imgur.com/3lhhn.png" rel="nofollow noreferrer">Fail state #3</a></li>
  </ul>
  <p>I have been trying to get this to also break with a browser and an HTML5 canvas element, but so far to no avail. So my question is this: Am I doing something wrong or is the Qt implementation of <code>arcTo</code> borked?</p>
  <p>Minimal reproducible example:</p>
  
  <pre class="lang-qml prettyprint-override"><code>import QtQuick 2.15
  import QtQuick.Controls 2.15
  import QtQuick.Layouts 1.15
  import QtQuick.Shapes 1.15
  import QtQuick.Window 2.15
  
  Window {
      id: window
  
      width: 800
      height: 480
      visible: true
  
      RowLayout {
          GridLayout {
              columns: 2
  
              Label { text: &quot;width&quot; }
              Slider {
                  id: widthSlider
                  from: 0; to: 500
                  value: canvas.implicitWidth
              }
  
              Label { text: &quot;height&quot; }
              Slider {
                  id: heightSlider
                  from: 0; to: 500
                  value: canvas.implicitHeight
              }
  
              Label { text: &quot;radius&quot; }
              Slider {
                  id: radiusSlider
                  from: 0; to: 12
              }
          }
  
          Canvas {
              id: canvas
  
              implicitWidth: 200
              implicitHeight: 40
  
              width: widthSlider.value
              height: heightSlider.value
  
              property real radius: radiusSlider.value
              onRadiusChanged: requestPaint()
  
              onPaint: {
                  let ctx = getContext(&quot;2d&quot;);
                  ctx.reset();
  
                  let pts = [
                          {x: width, y: height, r: radius},
                          {x: 10, y: height, r: radius},
                          {x: 0, y: height/2, r: radius},
                          {x: 10, y: 0, r: radius},
                          {x: width, y: 0, r: radius},
                          {x: width, y: height/2, r: 0},
                      ];
  
                  ctx.beginPath();
                  ctx.moveTo(pts[pts.length - 1].x, pts[pts.length - 1].y);
  
                  for (let i = 0; i &lt; pts.length - 1; i++) {
                      ctx.arcTo(
                                  pts[i].x, pts[i].y,
                                  pts[i + 1].x, pts[i + 1].y,
                                  pts[i].r);
                  }
  
                  ctx.closePath();
                  ctx.fill();
  
                  ctx.beginPath();
                  for (let j = 0; j &lt; pts.length; j++) {
                      ctx.ellipse(pts[j].x - 5, pts[j].y - 5, 10, 10);
                  }
                  ctx.strokeStyle = &quot;red&quot;;
                  ctx.stroke();
              }
          }
      }
  }
  </code></pre>