I have created circle in QML using canvas 2D. Half circle has light green color and another half sky blue but now i don't know how to set border color to this circle. anyone know how to set color to border of this circle??
Canvas {
anchors.fill: parent
onPaint: {
var ctx = getContext("2d");
ctx.reset();
var centreX =900;
var centreY = 150;
ctx.beginPath();
ctx.fillStyle = "#16AA55"; //green
ctx.moveTo(centreX, centreY);
ctx.arc(centreX, centreY,100, Math.PI * 0.01, Math.PI * 1, false);
ctx.lineTo(centreX, centreY);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = "#26A7CA";
ctx.moveTo(centreX, centreY);
ctx.arc(centreX, centreY, 100, Math.PI * 1, Math.PI * 2.01, false);
ctx.lineTo(centreX, centreY);
ctx.fill();
}
You need the strokeStyle
property to do this. Before drawing the shape onto the canvas set it to whatever color you want. More on this
Below is a snippet that draws two circles with different border colors.
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.strokeStyle = "#FF0000";
ctx.stroke();
ctx.beginPath();
ctx.arc(210, 75, 50, 0, 2 * Math.PI);
ctx.strokeStyle = "blue";
ctx.stroke();
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
Hope this helps :)