lienzo html5 con posición absoluta no funciona

Question

lienzo con posición absoluta no funciona como se 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 configurar el ancho y la altura manualmente? ¿O he cometido algún error?

Answer 1

Debe establecer la anchura y altura de forma manual.

Esto se puede hacer a través de JavaScript onresize event, que está bien porque casi siempre es necesario volver a dibujar la superficie del lienzo en todos los aspectos.

EDIT:

De especificación W3, aquí es la interfaz DOM lienzo:

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 de la espacio de coordenadas : anchura y altura. Estos atributos, cuando se especifique, deben tener valores que sean enteros válidos no negativos. Las reglas para que analizan números enteros no negativos se deben utilizar para obtener sus valores numéricos . Si falta un atributo, o si el análisis de su valor devuelve un error , se debe usar el valor predeterminado en su lugar. Los valores predeterminados de anchura de atributos a 300, y la altura de atributos por defecto a 150.

Answer 2

El posicionamiento funciona correctamente. Solo dibuja la caja negra en la esquina inferior derecha del lienzo.

Answer 3

El rectángulo está siendo recortado porque el elemento de lienzo tiene solo 300.150 píxeles de ancho.

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