Dimensione della canvas HTML5 tramite CSS rispetto agli attributi degli elementi

Non capisco perché i seguenti pezzi di codice producano risultati diversi, perché css ridimensiona la canvas mentre veniva ingrandita,

 #canvas { width: 800px; height: 600px; }   

In contrasto con questo approccio (che funziona come previsto):

  

La spiegazione è qui: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#attr-canvas-width come si vede in un altro post, grazie!

Le dimensioni intrinseche dell’elemento canvas equivalgono alle dimensioni dello spazio delle coordinate, con i numeri interpretati nei pixel CSS. Tuttavia, l’elemento può essere dimensionato arbitrariamente da un foglio di stile. Durante il rendering, l’immagine viene ridimensionata per adattarsi a questa dimensione del layout .

Pensa a cosa succede se hai un JPG che è 32×32 (ha esattamente 1024 pixel totali) ma specifica tramite CSS che dovrebbe apparire come width:800px; height:16px width:800px; height:16px . La stessa cosa vale per HTML Canvas:

  • Gli attributi width e height dell’elemento canvas stesso decidono quanti pixel è ansible disegnare. Se non si specifica l’altezza e la larghezza dell’elemento canvas, in base alle specifiche :
    “l’attributo width è impostato su 300 e l’attributo height è impostato su 150.”

  • Le proprietà CSS di width e height controllano le dimensioni visualizzate dall’elemento sullo schermo. Se le dimensioni CSS non sono impostate, la dimensione intrinseca dell’elemento viene utilizzata per il layout.

Se si specifica in CSS una dimensione diversa rispetto alle dimensioni effettive della canvas, questa deve essere allungata e schiacciata dal browser come necessario per la visualizzazione. Puoi vedere un esempio di questo qui: http://jsfiddle.net/9bheb/5/