Dynamic Canvas Size

Hello All,

I am new to lightning and wanted to put together a prototype of a chatbot app. The app is a prototype of something that would run on a set-top box. The user would press a button on their remote, ask a question. The app would wake up and provide a static response on the leftmost fourth of the screen (as not to interrupt whatever media is running in the BG). I am trying to figure out how to dynamically size the canvas based on the user’s screen size. I found documentation on runtime configurations on the lightning documentation LightningJS.io - Documentation which seems to allow for the definition of an options object.

const options = {debug: true, stage: {w: 1920, h: 1080, clearColor: 0xFF000000}} const App = new MyApp(options);

I didn’t see an example of how or where to use it. I was hoping it would be something as simple as

w: w=> w/4, h: 1080 to dynamically size the box to the left fourth of the screen. Is it that simple, or is there another approach? Is there a sample I can reference?

Even I will like to see how to approach responsive/dynamic with lightning


I’d recommend not changing the canvas size at all. You could set the canvas to be the full size of the display and then alpha: 0 a portion of the screen so it sits on top of another section and shows what is underneath. Thus you are just changing the position of your component.

Alternatively, if you don’t want to deal with two canvases - you could build your component and allow the parent app to import it and set its location on the screen.