html5 canvas con posizione assoluta non funziona

Question

Il quadro con posizione assoluta non funziona come potete vedere qui: http://jsfiddle.net/733zs/1/ (Testato in Firefox e Chrome) Il rettangolo dovrebbe avere una dimensione di 500x500 pixel.

C'è un modo per farlo funzionare, senza impostare manualmente larghezza e altezza? O ho fatto degli errori?

Answer 1

È necessario impostare larghezza e l'altezza manualmente.

Questo può essere fatto tramite JavaScript onresize evento - il che va bene perché è quasi sempre necessario ridisegnare la superficie della tua tela in qualsiasi modo.

EDIT:

Da W3 spec, ecco l'interfaccia tela 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); 
}; 

L'elemento tela ha due attributi per controllare la dimensione del spazio di coordinate : larghezza e altezza. Questi attributi, quando specificato, devono avere valori che sono numeri interi non negativi validi. Per ottenere i valori numerici , è necessario utilizzare le regole per l'analisi degli interi non negativi . Se manca un attributo o se l'analisi del suo valore restituisce un errore , è necessario utilizzare il valore predefinito. Le impostazioni predefinite di larghezza attributo a 300, e l'altezza attribuiscono il valore predefinito è 150.

Answer 2

Il posizionamento funziona correttamente. Stai solo disegnando la scatola nera nell'angolo in basso a destra della tela.

Answer 3

Il rettangolo viene troncato perché l'elemento canvas è grande solo 300.150 pixel.

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