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

Re: [Public WebGL] resizing the canvas render surface





On Tue, Jun 22, 2010 at 8:41 PM, Philip Rideout <philiprideout@gmail.com> wrote:
I wrote my first WebGL demo and it looks aliased when CSS causes the
canvas to enlarge.  This is probably expected behavior, but what's the
recommended practice for dealing with it?  Should my resize handler
create a new WebGLRenderingContext object somehow?  I'd love to see a
tiny snippet of _javascript_ that shows how to do this.  Looks like the
current spec is very clear about the viewport transform, but has
little to say about resolution.


You have to explicitly resize the canvas resolution in response to the display size of the canvas changing. 
This works exactly the same in WebGL as it does for the 2d canvas.

canvasElement = document.getElementById("id-of-canvas");
window.>

function handleResize() {
   // change the resolution of the canvas to match the size it's displayed
  element.width = element.clientWidth;
  element.height = element.clientHeight;
}

When a canvas is resized (2d or 3d) it is cleared so at that point you'll need to re-render your graphics. 

For example

function handleResize() {
   // change the resolution of the canvas to match the size it's displayed
  element.width = element.clientWidth;
  element.height = element.clientHeight;
  drawMyGraphics();
}

If your graphics take a while to draw it might be best to just set a flag in the handleResize function and draw later.

There's no need to get a new WebGLRenderingContext



 
 
Philip

-----------------------------------------------------------
You are currently subscribed to public_webgl@khronos.org.
To unsubscribe, send an email to majordomo@khronos.org with
the following command in the body of your email: