Resize Compose Web Canvas

[matsudamper]

There seems to be no way to fit the Compose Web Canvas to the screen.

The demo only has a fixed size. https://github.com/JetBrains/compose-multiplatform/blob/f5b9dfc91d718191c94b7e254ac0aeb0b185115b/components/resources/demo/shared/src/jsMain/resources/index.html#L12

This solution cannot be done because ComposeWindow is internal. https://github.com/JetBrains/compose-multiplatform/issues/2437

version

kotlin.version=1.8.10
compose.version=1.3.1

[eymar]

We aim to improve it.

As for now, there is a workaround you may use - https://slack-chats.kotlinlang.org/t/2224952/compose-for-web-on-canvas-skia-wasm-i-have-a-simple-function#59978a9c-356f-4e08-a5c9-9a096a050ddb

[matsudamper]

I dont know this annotation. That's pretty much it for now. Waiting for the official code. Thank you.

@file:Suppress(
    "INVISIBLE_MEMBER",
    "INVISIBLE_REFERENCE",
    "EXPOSED_PARAMETER_TYPE"
)

[DetachHead]

@eymar this workaround doesn't seem to work anymore. it works on the initial load but resizing the window causes it to crash. seems to be caused by accessing the internal layer.layer property

window.addEventListener("resize", {
    val newCanvas = canvas.cloneNode(false) as HTMLCanvasElement
    canvas.replaceWith(newCanvas)
    canvas = newCanvas
    // IrLinkageError: Property accessor 'layer.<get-layer>' can not be called: Private property accessor declared in module <org.jetbrains.compose.ui:ui> can not be accessed in module <com.example:project>
    val scale = layer.layer.contentScale
    newCanvas.fillViewportSize()
    layer.layer.attachTo(newCanvas)
    layer.layer.needRedraw()
    layer.setSize((newCanvas.width / scale).toInt(), (newCanvas.height / scale).toInt())
})

[okushnikov]

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