Html5 canvas with absolute position not working

Question

The canvas with the absolute position does not work, as you can see here: http://jsfiddle.net/733zs/1/ (Tested in Firefox and Chrome). The rectangle should have a size of 500x500 pixels.

Is there any way to make it work without setting the width and height manually? Or did I make mistakes?

Answer 1

You must set the width and height manually.

This can be done using the JavaScript onresize event - this is great because you almost always have to redraw the canvas surface onresize anyway.

EDIT:

From the 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 for controlling the size of the coordinate space: width and height. These attributes, if specified, must have values ​​that are real non-negative integers. Rules for parsing non-negative integers should be used to obtain their numerical values. If the attribute is missing, or if parsing its value returns an error, then use the default value instead. The default attribute width is 300, and the default height attribute is 150.

Answer 2

The rectangle is cropped because the canvas element has a total of 300,150 pixels.

http://jsfiddle.net/733zs/3/

Answer 3

Positioning works correctly. You just draw a black box in the lower right corner of the canvas.