title: How to draw text on arc?
body: <p><a href="https://i.stack.imgur.com/0km5L.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0km5L.png" alt="Something like that"></a>I am trying to add numbers around the circle created. The problem is that as soon as I add the text it deletes parts of the circle, and I do not know why.
  I've included the code snippet and screenshot before and after</p>
  
  <pre><code>public class PieChartView extends View {
      private Paint slicePaint;
      private int[] sliceClrs = { Color.RED, Color.WHITE,
              Color.CYAN, Color.WHITE,
              Color.CYAN, Color.WHITE,
              Color.CYAN, Color.WHITE,
              Color.CYAN, Color.WHITE};
      private RectF rectf; // Our box
      private float[] datapoints; // Our values
      Canvas canvas;
      Paint textColor;
      Path path = new Path();
      int colorCounterIndex = 0;
      public PieChartView(Context context, AttributeSet attrs) {
          super(context, attrs);
  
          slicePaint = new Paint();
          slicePaint.setAntiAlias(true);
          slicePaint.setDither(true);
          slicePaint.setStyle(Paint.Style.FILL);
  
          textColor = new Paint();
          textColor.setColor(Color.BLACK);
          textColor.setTextSize(50);
      }
  
      @Override
      protected void onDraw(Canvas canvas) {
          this.canvas = canvas;
          if (this.datapoints != null) {
              int startTop = 0;
              int startLeft = 0;
              int endBottom = getWidth();
              int endRight = endBottom; // To make this an equal square
              // Create the box
              rectf = new RectF(startLeft, startTop, endRight, endBottom); // Creating the box
  
              float[] scaledValues = scale(); // Get the scaled values
              float sliceStartPoint = 0;
              for (int i = 0; i &lt; scaledValues.length; i++) {
                  slicePaint.setColor(sliceClrs[i]);
                  canvas.drawArc(rectf, sliceStartPoint, scaledValues[i], true, slicePaint); // Draw slice
  
                  canvas.rotate(36, getWidth() / 2, getHeight()/2);
                  path.addCircle(getWidth() / 2, getHeight() / 2, 180, Path.Direction.CW);
                  canvas.drawTextOnPath("(" + i + ")", path, 0, 5, textColor);
  
                  sliceStartPoint += scaledValues[i]; // Update starting point of the next slice
  
              }
              setLayerType(View.LAYER_TYPE_SOFTWARE, null);
          }
      }
  
      public Canvas getCanvas() {
          return canvas;
      }
  
      public void setDataPoints(float[] datapoints) {
          this.datapoints = datapoints;
          invalidate(); // Tells the chart to redraw itself
      }
  
      private float[] scale() {
          float[] scaledValues = new float[this.datapoints.length];
          float total = getTotal(); // Total all values supplied to the chart
          for (int i = 0; i &lt; this.datapoints.length; i++) {
              scaledValues[i] = (this.datapoints[i] / total) * 360; // Scale each value
          }
          return scaledValues;
      }
  
      private float getTotal() {
          float total = 0;
          for (float val : this.datapoints)
              total += val;
          return total;
      }
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/Desko.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Desko.png" alt="Screen shot of the result before and after i added the text on the circle"></a></p>
  
  <p>Thanks</p>