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>(listOf()) } private data class FontSet( val fileName: String, val weight: FontWeight, val style: FontStyle, ) private val fonts: List = 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> = 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？

[okushnikov]

Please check the following ticket on YouTrack for follow-ups to this issue. GitHub issues will be closed in the coming weeks.