Canvas has rotate function that can rotate and DrawScope function it’s wrapped with.

Canvas(modifier =Modifier.fillMaxSize()){
    rotate(degrees = angle){
        // Anything you draw is rotated by this angle
    }
    // Things you draw here are not rotated
}

I want to create a Canvas APP on Compose Desktop to draw molecule structure, when clicking on window, the canvas will draw a straigth a line, I am using Path() class in Compose, but I want to rotate the Path() when clicking on window. I am using cos() and sin() function to calculate the endpoint of current straight line, but I want a better way to draw a rotated line on canvas.

By the way, since I am using Compose Multiplatform framework, so Jetpack Compse solution should work fine for me.

My current code is as follow:

package customCanvas

import androidx.compose.foundation.Canvas
import androidx.compose.foundation.background
import androidx.compose.foundation.gestures.awaitFirstDown
import androidx.compose.foundation.gestures.forEachGesture
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.*
import androidx.compose.ui.graphics.drawscope.Stroke
import androidx.compose.ui.input.pointer.pointerInput
import androidx.compose.ui.graphics.Path
import kotlin.math.cos
import kotlin.math.sin


@Composable
fun customCanvas(){
    var currentPosition by remember { mutableStateOf(Offset.Unspecified) }
    var previousPosition by remember { mutableStateOf(Offset.Unspecified) }
    var currentPath by remember { mutableStateOf(Path()) }
    val paths = remember { mutableStateListOf<Path>() }
    val randomAngle = listOf<Float>(45f, -45f)

    Canvas(
        modifier = Modifier
            .fillMaxSize()
            .background(color = Color.Gray)
            .pointerInput(Unit) {
                forEachGesture {
                    awaitPointerEventScope {
                        awaitFirstDown().also {
                            currentPosition = it.position
                            println("position: ${it.position}")
                            previousPosition = currentPosition
                            currentPath.moveTo(currentPosition.x, currentPosition.y)   //change the current path position to clicked coordinate on canvas
                            val angle = randomAngle.random()

                            // ***get the end point of the path useing cos() and sin()***
                            val toPoint = getPointByAngle(40f, angle, Pair(currentPosition.x, currentPosition.y))
                            currentPath.lineTo(toPoint.first, toPoint.second)

                            paths.add(currentPath) //add the "path" to a paths Array so coroutine can draw the line on canvas latter

                        }
                    }
                }
            }
    ){
        with(drawContext.canvas.nativeCanvas) {
            val checkPoint = saveLayer(null, null)
            paths.forEach { it: Path ->
                drawPath(
                    color = Color.Black,
                    path = it,
                    style = Stroke(
                        width = 4f,
                        cap = StrokeCap.Round,
                        join = StrokeJoin.Round,
                    )
                )
            }
        }
    }
}

//calculate the end point x and y coordinate by cos() and sin()
fun getPointByAngle(length: Float, angle: Float, startPoint: Pair<Float, Float>): Pair<Float, Float> {
    return Pair(startPoint.first + length * cos(angle), startPoint.second + length * sin(angle))
}