title: Jetpack Compose semicircle using Canvas
body: <p>I am trying to create a semicircle speed progress bar in Jetpack Compose. Unless the view is square the semicircle will not look as expected, if I use 1:2 width: height it will be flattened. I want a Composable representing half of the circle where I don't have unusable bottom half of the view.</p>
  <pre><code>    Box(
          modifier = modifier
              .background(Color.Red)
      ) {
          Canvas(modifier = Modifier.size(300.dp)) {
              drawArc(
                  color = Color.LightGray,
                  -180f,
                  180f,
                  useCenter = false,
                  style = Stroke(8.dp.toPx(), cap = StrokeCap.Round)
              )
          }
          Text(
              modifier = Modifier.align(alignment = Alignment.Center),
              text = &quot;20 Mbps&quot;,
              color = Color.White,
              fontSize = 20.sp
          )
      }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/QJF6r.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QJF6r.png" alt="enter image description here" /></a></p>
  <p>The expected outcome would be a reusable semicircle composable with a height of the actual semicircle so I can easily position other content against it. The expected view size is marked by a dotted green line.</p>
  <p><a href="https://i.stack.imgur.com/7BlMW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7BlMW.png" alt="enter image description here" /></a></p>