[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]

Re: [Public WebGL] Behavior of WebGL canvas when it can't make a backbuffer of the requested size?

On Wed, Nov 10, 2010 at 12:34 AM, Mark Callow <callow_mark@hicorp.co.jp> wrote:

On 10/11/2010 03:34, Chris Marrin wrote:
> But you bring up a good point. If the author does "canvas.width = 1000; canvas.height = 500;" will the canvas get resized twice? In other words, what are our rules for when the canvas gets resized? Is there a way for us to optimize the sizing? Maybe we could delay resizing the canvas until either the size is queried, or a WebGL call is made.
I think it would be preferable if the resizes can be coalesced somehow.

>> I am already having a hard time achieving what I'd like to do regarding canvas size due to having to specify the size in pixels - an insane idea given the wide variety of displays we have to deal with.
> Huh? This is the way the web works. Mobile devices have had to deal with it from day 1. There are really several choices (from an iOS perspective):
As far as I recall canvas is the only element where size  must be
specified in pixels. Others can be specified as percentage, points,
picas, mm, etc.

The display size can be specified in any size.

canvas.style.width = "30%";
canvas.style.height = "3em";

This is and isn't different from say the Img tag.  Although with the image tag you can do

img.width = "30%" that has been deprecated. You're supposed to use img.style.width = "30%" .

Also, setting img.width="30%" doesn't change the number of pixels in the image. It only changes the display size.

> 1) The author does nothing and the scaling logic in the web browser kicks in to show the entire page scaled down or zoomed in. In this case you design like you would for a desktop browser and count on the device to scale appropriately.
> 2) The author specifies the page size in meta tags and writes specifically for the resolution of the device being used. This is less useful nowadays that there are at least 3 screen resolutions of iOS devices.
> 3) Use media queries and design several layouts in CSS for a variety of sizes. You can also use media queries from JS to change behavior based on various possible layouts.
> 4) Use window.innerWidth/window.innerHeight to find the current window size. On iOS devices, they are always "full-screen", so this gives you the screen size. It is actually the size inside the chrome. You can get the real screen size with window.outerWidth/window.outerHeight.
> So there are plenty of tools to deal with the wide variety of mobile devices. Everything but (2) above are also viable design tools for desktop browsers.
Indeed. But being able to set sizes as percentages, in particular, is an
extremely useful aid to the above techniques.

Sadly GWT does not currently have inner{Width,Height} queries so I've
had to be a bit more, er.., creative, in order to size my canvas
according to the size of the browser window.