title: Canvas Paint, Bezier Curve, Arc Highest point
body: <p>I'm having some struggle with the mathematics of what I'm trying to accomplish, I have a bezier curve and Im trying to draw a circle on its highest peak, when its a straight horizontal line, its fine, but once I curved the line (cubicTo) and using PathMeasure.getPosTan(..), it moves away from the highest peak. Please see the attached Image and codes below</p>
  
  <p><a href="https://i.stack.imgur.com/VbvFx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VbvFx.png" alt="straight Line"></a></p>
  
  <p><a href="https://i.stack.imgur.com/IYZBu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IYZBu.png" alt="curved line"></a></p>
  
  <pre><code>arcPath.cubicTo(0f, height.toFloat(), mArcPeakX, mArcPeakY, width.toFloat(), height.toFloat())
  </code></pre>
  
  <p>and the part that does the painting of circles</p>
  
  <pre><code>arcPathMeasure.getPosTan(mArcPeakX, positionArray, null)
  
  canvas.drawCircle(0f, height.toFloat(), 10f, paint)
  canvas.drawCircle(positionArray[0],  positionArray[1], 10f, paint)
  canvas.drawCircle(width.toFloat(), height.toFloat(), 10f, paint)
  </code></pre>
  
  <p>I dont know what math am i missing, but once the line is curved, the circle advances and is not painted on the peak of the arc/curve. </p>