Dynamic canvas resize without grawings rescaled?

[membersound]

I have a gwt canvas which should take the whole space of the main centered contend in a docklayout.

<g:DockLayoutPanel unit='PCT'>
//...
  <g:center>
    <g:Label>
    <c:Canvas...>
    </g:Label>
  </g:center>


Now, If I resize the browser window, I do NOT want the painted graphics to be resized. Only the "outer" canvas drawing area should be resized along with the browser so that the canvas is still visible. But some of the already drawings may be cutted.

(Similar to google maps, where the map stays the same all the time nomatter how the browser window changes size).

How could I do this?

Thanks

[RyanZA]

When you resize an html5 canvas, the contents will be cleared. You can get around this by creating a second canvas without attaching it to the DOM, and then
1.drawing the original canvas on to the new temporary canvas
2.resize the original canvas (which will clear it) - make sure to use setCoordinateSpaceWidth so that the actual pixel size remains consistent with the new canvas size.
3.draw the temporary canvas onto the original canvas in the correct position

Regarding resizing on canvas and panels in general: the best way is to make sure that the entire chain of panels from the root layout panel all implement, and create a FocusWidget that implements RequiresResize, and override this method in the widget:

    public void onResize() {
        int width = this.getElement().getParentElement().getClientWidth();
        int height = this.getElement().getParentElement().getClientHeight();
       
        if (this.getCoordinateSpaceWidth() != width)
            this.setCoordinateSpaceWidth(width);
        if (this.getCoordinateSpaceHeight() != height)
            this.setCoordinateSpaceHeight(height);