Hi Elise,
Visual rendering can quickly become challenging when factoring in the variety of displays used to visit a webpage. The ideal solution will depend on what you are trying to accomplish: do you want constant spacing between elements, so that narrower resolutions might have them outflow the screen, or do you want to (try to) force all your elements to fit on the screen, in which case the spacing between the elements and/or their sizes cannot be constant
Modifying the CSS file is the most powerful and I would say the optimal solution in such cases, but CSS can be quite confusing (at least in my experience). Both the absolute and relative position settings should be interpreted relative to the first parent which has the same setting, so it’s not always truly absolute. I tried to make Canvas elements a little simpler (I don’t know if I succeeded). For example, if you want to show one rectangle on each quarter of the page, no matter the resolution, you can do this:
newCanvas("page", "100vw", "100vh")
.add( "center at 25%" , "middle at 25%" , newCanvas().css('background-color', 'red').size("20vw","20vh") )
.add( "center at 25%" , "middle at 75%" , newCanvas().css('background-color', 'green').size("20vw","20vh") )
.add( "center at 75%" , "middle at 25%" , newCanvas().css('background-color', 'yellow').size("20vw","20vh") )
.add( "center at 75%" , "middle at 75%" , newCanvas().css('background-color', 'blue').size("20vw","20vh") )
.print( "center at 50vw" , "middle at 50vh" )
Feel free to give more detail about what visual rendering you’re aiming for
Jeremy