La tela HTML5 con posizione assoluta non funziona

Question

La tela con posizione assoluta non funziona come puoi 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 errori?

Answer 1

È necessario impostare manualmente la larghezza e l'altezza.

Questo può essere fatto tramite JavaScript OnResize Event - il che va bene perché è quasi sempre necessario ridisegnare comunque la superficie della tela.

MODIFICARE:

Dalle specifiche W3, ecco l'interfaccia DOM CANVAS:

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 le dimensioni dello spazio delle coordinate: larghezza e altezza. Questi attributi, se specificati, devono avere valori che sono numeri interi validi non negativi. Le regole per l'analisi dei numeri interi non negativi devono essere utilizzate per ottenere i loro valori numerici. Se manca un attributo o se l'analisi del suo valore restituisce un errore, è necessario utilizzare invece il valore predefinito. L'attributo di larghezza predefinito è predefinito a 300 e l'attributo di altezza è default a 150.

Answer 2

Il rettangolo viene tagliato perché l'elemento tela è grande solo 300.150 pixel.

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

Answer 3

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