QML Canvas: different behaviour in rendering

Question

I am trying to draw an annulus sector in QML using the Canvas object. First, I have written the javascript code, and I have verified that it is correct by executing it in a browser.

Here it is:

var can = document.getElementById('myCanvas');
var ctx=can.getContext("2d");
var center = {
  x: can.width / 2,
  y: can.height / 2
};
var minRad = 100;
var maxRad = 250;

var startAngle = toRad(290);
var endAngle = toRad(310);

drawAxis();
drawSector();

function drawSector() {
  var p1 = {
    x: maxRad * Math.cos(startAngle),
    y: maxRad * Math.sin(startAngle)
  }
  p1 = toCanvasSpace(p1);

  var p2 = {
    x: minRad * Math.cos(startAngle),
    y: minRad * Math.sin(startAngle)
  }
  p2 = toCanvasSpace(p2);

  var p3 = {
    x: minRad * Math.cos(endAngle),
    y: minRad * Math.sin(endAngle)
  }
  p3 = toCanvasSpace(p3);
  var p4 = {
    x: maxRad * Math.cos(endAngle),
    y: maxRad * Math.sin(endAngle)
  }
  p4 = toCanvasSpace(p4);

  ctx.beginPath();
  ctx.moveTo(p1.x, p1.y);
  ctx.arc(center.x, center.y, maxRad, startAngle, endAngle);
  ctx.lineTo(p3.x, p3.y);
  ctx.arc(center.x, center.y, minRad, endAngle, startAngle, true);
  ctx.closePath();

  ctx.strokeStyle = "blue";
  ctx.lineWidth = 2;
  ctx.stroke();
}


function drawAxis() {
  ctx.beginPath();
  ctx.moveTo(can.width / 2, 0);
  ctx.lineTo(can.width / 2, can.height);
  ctx.stroke();
  ctx.beginPath();
  ctx.moveTo(0, can.height / 2);
  ctx.lineTo(can.width, can.height / 2);
  ctx.stroke();
}

function toRad(degrees) {
  return degrees * Math.PI / 180;
}

function toCanvasSpace(p) {
  var ret = {};
  ret.x = p.x + can.width / 2;
  ret.y = p.y + can.height / 2;
  return ret;
}

Here you can run the code above. The output is this:

Next, I moved the same code into a Canvas object in Qml.

See here the main.qml containing the Canvas:

import QtQuick 2.5
import QtQuick.Window 2.2

Window {
    visible: true
    width: 500
    height: 500
    x:500

    Canvas
    {
        id: can
        anchors.fill: parent
        antialiasing: true



        onPaint: {
            var ctx=can.getContext("2d");

            var center = {
                x: can.width / 2,
                y: can.height / 2
            };
            var minRad = 100;
            var maxRad = 250;

            var startAngle = toRad(290);
            var endAngle = toRad(310);

            drawAxis();
            drawSector();

            function drawSector() {
                var p1 = {
                    x: maxRad * Math.cos(startAngle),
                    y: maxRad * Math.sin(startAngle)
                }
                p1=toCanvasSpace(p1);

                var p2 = {
                    x: minRad * Math.cos(startAngle),
                    y: minRad * Math.sin(startAngle)
                }
                p2=toCanvasSpace(p2);

                var p3 = {
                    x: minRad * Math.cos(endAngle),
                    y: minRad * Math.sin(endAngle)
                }
                p3=toCanvasSpace(p3);
                var p4 = {
                    x: maxRad * Math.cos(endAngle),
                    y: maxRad * Math.sin(endAngle)
                }
                p4=toCanvasSpace(p4);

                ctx.beginPath();
                ctx.moveTo(p1.x, p1.y);
                ctx.arc(center.x, center.y, maxRad, startAngle, endAngle);
                ctx.lineTo(p3.x, p3.y);
                ctx.arc(center.x, center.y, minRad, endAngle, startAngle, true);
                ctx.closePath();

                ctx.strokeStyle="blue";
                ctx.lineWidth=2;
                ctx.stroke();
            }


            function drawAxis() {
                ctx.beginPath();
                ctx.moveTo(can.width / 2, 0);
                ctx.lineTo(can.width / 2, can.height);
                ctx.stroke();
                ctx.beginPath();
                ctx.moveTo(0, can.height / 2);
                ctx.lineTo(can.width, can.height / 2);
                ctx.stroke();
            }

            function toRad(degrees) {
                return degrees * Math.PI / 180;
            }

            function toCanvasSpace(p) {
                var ret = {};
                ret.x = p.x + can.width / 2;
                ret.y = p.y + can.height / 2;
                return ret;
            }


        }
    }
}

In this case I get this output:

As you can see there is an imperfection at the bottom.

I really don't understand why there is that imperfection; moreover I don't understand why the same code gives different output.

Any help is appreciated! Thanks

Answer 1

The lineTo p3 is not needed, because when an arc segment is drawn, the connecting line is drawn automatically, according to the Canvas specifications:

The arc() method is equivalent to the ellipse() method in the case where the two radii are equal. [...]

When the ellipse() method is invoked, it must proceed as follows. First, if the object's path has any subpaths, then the method must add a straight line from the last point in the subpath to the start point of the arc.

Also, the moveTo p1 is not needed, because it would be done as part of the first arc.

As to why the extra line is being drawn further than the start of the second arc, it could be a bug in Qt (maybe a division by 0 issue - just guessing here), or maybe you simply did not compute its position correctly.