QML Context2D how to fill two ellipses with different colors? - qml

Question

I want to create an n segmente color bar, where its end points are semi circles. Here is my code so far:
File main.qml
import QtQuick 2.12
import QtQuick.Window 2.12
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
ResultBar{
anchors.centerIn: parent
vmColorArray: ["#0000ff", "#00ff00", "#ff0000"];
id: test;
}
}
File ResultBar.qml
import QtQuick 2.0
Item {
id: resultBar
width: 200
height: 20
property var vmColorArray: [];
Canvas {
id: rightTip
width: parent.width
height: parent.height
contextType: "2d"
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
onPaint: {
if (vmColorArray.length < 2) return;
var ctx = rightTip.getContext("2d");
ctx.reset();
var y = 0;
var n = vmColorArray.length;
var w = width/n;
// Left end
ctx.ellipse(0,y,height,height);
ctx.fillStyle = vmColorArray[0];
ctx.fill();
ctx.closePath();
// Right end
ctx.ellipse(width-height,y,height,height);
ctx.fillStyle = vmColorArray[n-1];
ctx.fill();
var x = 0;
for (var i = 0; i < n; i++){
if (i === 0) x = height/2;
else x = i*w;
var wd
if (i === n-1) wd = w - height/2;
else wd = w
ctx.fillStyle = vmColorArray[i];
ctx.fillRect(x,y,wd,height)
}
}
}
}
My problem is that coloring the right end ALSO colors the left end. Here is what it looks like:
So my question is how do I tell the canvas to fill one of the circles and THEN fill the other without refilling the previous one?

Answer 1

I've figured it out. Copying ONLY the relevant code:
// Left end
ctx.fillStyle = vmColorArray[0];
ctx.ellipse(0,y,height,height);
ctx.fill();
//ctx.closePath();
// Right end
ctx.beginPath()
ctx.fillStyle = vmColorArray[n-1];
ctx.ellipse(width-height,y,height,height);
ctx.fill();
The key was to begin a new path!! Hope this helps someone!