Html5-Canvas with variable size

I tried to make a Html-page with a Canvas-element, which fills the whole page or browser window. Following line

<canvas width="100%" height="100%">

didnt work. It produced a canvas with a dimension of 100x100 pixels. Following

<canvas style="width:100%;height:100%" width="100%" height="100%">

worked a bit better: the canvas filled the browser window. Though the canvas still had a size of 100x100 pixels, but it was scaled up to fit the page. To have a canvas that dynamically changes its size according to the browser window, I had to set canvas.width and .height manually, like in this code snippet:

var cont=canvas.parentNode;
if ((canvas.width!=cont.clientWidth)||(canvas.height!=cont.clientHeight)) {
  canvas.width=cont.clientWidth;
  canvas.height=cont.clientHeight;}

Note: by setting e.g. canvas.width the canvas will be cleared, so the resize must take place before the repaint.

Update: If the canvas is used with WebGL, the gl-viewport must be set to the new size.

gl.viewport(0,0,canvas.width,canvas.height);