Web Compose Canvas could not display and input any Chinese, and there is a black stroke line with the application while inputing

[GaoXing0608]

Describe the bug A clear and concise description of what the bug is.

Affected platforms Select one of the platforms below:

• Web (K/JS) - Canvas based API

If the bug is Android-only, report it in the Jetpack Compose tracker

Versions

• Kotlin version*: 1.8.0
• Compose Multiplatform version*: 1.4.0-alpha01-dev954
• OS version(s)* (required for Desktop and iOS issues): Windows10 or Ubuntu20
• OS architecture (x86 or arm64): X86
• JDK (for desktop issues): 17

Screenshots

[matsudamper]

Does the default font used not include Chinese or Japanese? I was able to load and display the fonts myself.

Code

import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.staticCompositionLocalOf
import androidx.compose.ui.text.font.Font
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.platform.Font
import kotlinx.coroutines.flow.MutableStateFlow
import kotlinx.coroutines.flow.map
import kotlinx.coroutines.flow.update
import io.ktor.client.HttpClient
import io.ktor.client.engine.js.Js
import io.ktor.client.request.get
import io.ktor.client.statement.readBytes
import io.ktor.http.Url


private val LocalCustomFontsFlow = staticCompositionLocalOf {
    MutableStateFlow<List<Font>>(listOf())
}

private data class FontSet(
    val fileName: String,
    val weight: FontWeight,
    val style: FontStyle,
)

private val fonts: List<FontSet> = listOf(
    FontSet("NotoSansJP-Medium.ttf", FontWeight.Medium, FontStyle.Normal),
    FontSet("NotoSansJP-Bold.ttf", FontWeight.Bold, FontStyle.Normal),
    FontSet("NotoSansJP-Regular.ttf", FontWeight.W400, FontStyle.Normal),
    FontSet("NotoSansJP-Black.ttf", FontWeight.Black, FontStyle.Normal),
    FontSet("NotoSansJP-ExtraBold.ttf", FontWeight.ExtraBold, FontStyle.Normal),
    FontSet("NotoSansJP-ExtraLight.ttf", FontWeight.ExtraLight, FontStyle.Normal),
    FontSet("NotoSansJP-Light.ttf", FontWeight.Light, FontStyle.Normal),
    FontSet("NotoSansJP-SemiBold.ttf", FontWeight.SemiBold, FontStyle.Normal),
    FontSet("NotoSansJP-Thin.ttf", FontWeight.Thin, FontStyle.Normal),
)

@Composable
public actual fun rememberCustomFontStyle(): FontFamily {
    val fontsFlow: MutableStateFlow<List<Font>> = LocalCustomFontsFlow.current

    LaunchedEffect(Unit) {
        fonts.forEach { fontSet ->
            runCatching {
                HttpClient(Js)
                    .get(Url("/fonts/${fontSet.fileName}"))
            }.onFailure {
                it.printStackTrace()
            }.onSuccess { response ->
                val byteArray = response.readBytes()
                fontsFlow.update {
                    it.plus(
                        Font(
                            identity = fontSet.fileName,
                            data = byteArray,
                            weight = fontSet.weight,
                            style = fontSet.style,
                        ),
                    )
                }
            }
        }
    }
    return fontsFlow.map {
        if (it.isEmpty()) {
            FontFamily.Default
        } else {
            FontFamily(it)
        }
    }.collectAsState(FontFamily.Default).value
}

[Crazy-Kyle]

Has this problem been solved? It really affects the user experience？