html5 canvas with absolute position doesn't work

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 500x500 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.