canvas size problem

By Xah Lee. Date: . Last updated: .

the problem i want to solve here is this.

i want the canvas to be max the windows size, and freely scalable. That is, not fixed size. When window is large, or user has large monitor, the user also will benefit. i.e. the canvas is large up to their window or screen size. (unlike most pc video games that often has fixed canvas size.)

the problem is, seems to be, there are several issues about how to control or exactly what i want, about the aspect ratio and height width ratio.

for example, some plot, such as sine, from 1 to 100, is super wide, but only height of 2, if we keep aspect ratio. So, it would become a thin strip. That's not what we want.

canvas size prob sine 2018 31f90
canvas size prob sine 2018 31f90

some plot, would be vertical strip, such as say parabola y = x^2, with x from 0 to 10.

parabola vertical strip 2018 4f637
parabola vertical strip 2018 4f637

so it seems, you do want to specify a width height ratio. And an ideal one would be something like a square or typical tv (4/3) or some of the standard size for movie film dvd hdtv.

but suppose we use square (1/1 ratio). Then, if user plots sine from 1 to 100, then, you'd get a thin strip within the square. So, that's still a problem.

so in general, it seems that keeping aspect ratio and hope for a nice plot is hopeless. because, in real world, arbitrary plot will not have near 1/1 width height ratio.

so it seems, the solution now is, 1, specify a width/height ratio, such as 1/1. Then, by default it'll plot without aspect ratio of 1, but with user option to specify aspect ratio of 1.

need to think thru.

solution

now, one thing becomes clear is that don't confuse aspect ratio with canvas size. (canvas size here means its width height )

that is, there are 2 related but different problems:

they are separate problems because most likely we want the canvas size independent of the aspect ratio of the plot. because otherwise, if canvas aspect ratio changes by the plot range width height, then the canvas size becomes unpredicable to user. especially when the plot is a long strip, and in brower it requires scroll down to view a tiny part of the whole.

variable canvas size with fixed aspect ratio

so, we want the aspect ratio of canvas size to be fixed.

the best aspect ratio for canvas size is probably squarish, like 4/3. i.e. width 4, height 3, with ratio about 1.33.

we want the width to be variable, according to user's screen size, something like 90% width of the window.

see CSS: Fixed Aspect Ratio