https://kotlinlang.org logo
#compose-web
Title
# compose-web
g

Giorgi

01/26/2023, 3:57 PM
How do I resize the canvas to match the browser window?? I have html and css file:
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Youtube History</title>
    <link href="style.css" rel="stylesheet" type="text/css"/>
    <script src="skiko.js"></script>
</head>
<body>
<canvas id="ComposeTarget"></canvas>
<script src="web2.js"></script>
</body>
</html>

// style.css
html, body {
  height: 100%;
  margin: 0;
}
canvas {
  width: 100%;
  height: 100%;
  display: block;
}
Tried a lot of other stuff from google but the canvas tag does not resize to full page. I feel like compose is doing something to have it appear as some kind of default size. it is something like
a

andylamax

01/26/2023, 4:03 PM
Copy code
html, body {
  height: 100vh;
  width: 100vw;
}
g

Giorgi

01/26/2023, 4:06 PM
nope, has no effect...
it seems to ignore any value except ones specified as px
okay so it does not work from CSS file at all. it has effect if it is specified in the tag
It also adds bunch of extra stuff to the canvas
a

Adam S

01/26/2023, 4:35 PM
are you opening the file directly, or via IntelliJ, or some other tool? I one found that opening the file through IntelliJ causes all my HTML to be misaligned
p

Pablichjenkov

01/26/2023, 4:39 PM
g

Giorgi

01/26/2023, 4:53 PM
Thanks, it worked
are you opening the file directly, or via IntelliJ, or some other tool?
I run a gradle task
browserDevelopmentRun
and it opens the default browser automaticaly
p

Pablichjenkov

01/26/2023, 5:24 PM
Cool, notice it won't adapt to browser size changes. For that you have to create a JavaScript function that clears the canvas and update the canvas with the new window size.
Also not looking great from my phone. When I access the local server on my Mac from my phone, the App looks split up. But I think is a problem related to the way the mobile browser renders compose, not necessarily associated to canvas occupying the full page space
m

Michael Paus

01/26/2023, 6:55 PM
Does this example show the behaviour you want? https://www.mpmediasoft.de/test/PolySpiralMpp/ If yes, you can find the full example code here: https://github.com/mipastgt/JavaForumStuttgartTalk2022/tree/main/PolySpiralMpp The example fills the whole window and adapts the canvas size automatically when the window size changes.
p

Pablichjenkov

01/26/2023, 7:19 PM
Looks amazing, I just tried from my phone, on desktop should look even better. Thanks
92 Views