Question

Canvas with absolute position doesn’t work as you can see here:
http://jsfiddle.net/733zs/1/ (Tested in Firefox and Chrome) The Rectangle should have a size of 500×500 pixel.

Is there a way to make it work, without setting width and height manually? Or do I have made any mistakes?

Answer 1

You must set width and height manually.

This can be done through JavaScript onresize event – which is fine because you almost always need to redraw your canvas surface onresize anyways.

EDIT:

From W3 spec, here is the canvas DOM interface:

http://www.w3.org/TR/html5/the-canvas-element.html

interface HTMLCanvasElement : HTMLElement {
           attribute unsigned long width;
           attribute unsigned long height;

  DOMString toDataURL(in optional DOMString type, in any... args);
  void toBlob(in FileCallback, in optional DOMString type, in any... args);

  object getContext(in DOMString contextId, in any... args);
};

The canvas element has two attributes to control the size of the
coordinate space: width and height. These attributes, when specified,
must have values that are valid non-negative integers. The rules for
parsing non-negative integers must be used to obtain their numeric
values. If an attribute is missing, or if parsing its value returns an
error, then the default value must be used instead. The width
attribute defaults to 300, and the height attribute defaults to 150.