Is there a way to hide the content overflow the canvas size? - android-jetpack-compose

Question

I set a size for the canvas and used drawCircle. Since the circle is larger than the canvas, the circle will appear to be out of bounds.
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
MyApplicationTheme {
// A surface container using the 'background' color from the theme
Box(
contentAlignment = Alignment.Center,
modifier = Modifier
.fillMaxSize()
.background(Color.Black)
) {
Canvas(modifier = Modifier.size(300.dp).background(Color.Blue)){
drawCircle(
color = Color.White,
center = Offset(x = size.width / 2f, y = size.height / 2f),
radius = (size.minDimension / 2f)+50
)
}
}
}
}
}
}
enter image description here
I expect the part of overflow will hide，just like this：
enter image description here
what should I do？

Answer 1

Modifie.clipToBounds() clips any drawing that is outside of Composable
/**
* Clip the content to the bounds of a layer defined at this modifier.
*/
#Stable
fun Modifier.clipToBounds() = graphicsLayer(clip = true)
which is Modifier.graphicsLayer{clip = true} under the hood that you can use as
Canvas(modifier = Modifier
.clipToBounds()
.size(300.dp).background(Color.Blue)){
drawCircle(
color = Color.White,
center = Offset(x = size.width / 2f, y = size.height / 2f),
radius = (size.minDimension / 2f)+50
)
}

Answer 2

You can use something like this:
// A surface container using the 'background' color from the theme
Box(
contentAlignment = Alignment.Center,
modifier = Modifier
.fillMaxSize()
.background(Color.Black)
) {
Canvas(
modifier = Modifier
.size(300.dp)
.background(Color.Blue)
){
clipRect {
drawCircle(
color = Color.White,
center = Offset(x = size.width / 2f, y = size.height / 2f),
radius = (size.minDimension / 2f)+50
)
}
}
}