htmlcanvasqml

How to set color to border of circle canvas


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();
          }

Solution

  • 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 :)