How do I resize the canvas to match the browser window I hav kotlinlang #compose-web

How do I resize the canvas to match the browser wi...

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

andylamax

01/26/2023, 4:03 PM

Copy code

html, body {
  height: 100vh;
  width: 100vw;
}

Giorgi

01/26/2023, 4:06 PM

nope, has no effect...

Giorgi

01/26/2023, 4:10 PM

it seems to ignore any value except ones specified as px

Giorgi

01/26/2023, 4:14 PM

okay so it does not work from CSS file at all. it has effect if it is specified in the tag

Giorgi

01/26/2023, 4:15 PM

It also adds bunch of extra stuff to the canvas

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

Pablichjenkov

01/26/2023, 4:39 PM

Try this: https://github.com/pablichjenkov/templato/blob/master/uistate3/jsApp/src/jsMain/resources/index.html Check the style file in that same directory

Giorgi

01/26/2023, 4:53 PM

Thanks, it worked

Giorgi

01/26/2023, 4:54 PM

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

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.

Pablichjenkov

01/26/2023, 5:27 PM

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

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.

Pablichjenkov

01/26/2023, 7:19 PM

Looks amazing, I just tried from my phone, on desktop should look even better. Thanks

155 Views

Open in Slack

Previous Next