El lienzo HTML5 con posición absoluta no funciona

Question

El lienzo con posición absoluta no funciona como puede ver aquí:http://jsfiddle.net/733zs/1/ (Probado en Firefox y Chrome) El rectángulo debe tener un tamaño de 500x500 píxeles.

¿Hay alguna manera de hacerlo funcionar, sin establecer el ancho y la altura manualmente? ¿O he cometido algún error?

Answer 1

Debes establecer ancho y altura manualmente.

Esto se puede hacer a través del evento JavaScript OnResize, lo cual está bien porque casi siempre necesita volver a dibujar su lienzo de superficie de todos los resultados.

EDITAR:

A partir de la especificación de W3, aquí está la interfaz Canvas DOM:

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);
};

El elemento Canvas tiene dos atributos para controlar el tamaño del espacio de coordenadas: ancho y altura. Estos atributos, cuando se especifican, deben tener valores que son enteros no negativos válidos. Las reglas para analizar enteros no negativos deben usarse para obtener sus valores numéricos. Si falta un atributo, o si analizar su valor devuelve un error, entonces el valor predeterminado debe usarse en su lugar. El atributo de ancho predeterminado a 300, y el atributo de altura predeterminado a 150.

Answer 2

El rectángulo se está recortando porque el elemento lienzo es de solo 300,150 píxeles grandes.

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

Answer 3

El posicionamiento funciona correctamente. Solo estás dibujando la caja negra en la esquina inferior derecha del lienzo.