HTML5 Canvas viene visualizzato fuori dallo schermo per impostazione predefinita?

Question

Se lo faccio:

    <canvas id="canvas" width="100" height="100">
        <p>Your browser does not support HTML5 Canvas.</p>
    </canvas>

E questo:

    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');

    ctx.fillRect(150, 150, 10, 20);

Il rettangolo verrà visualizzato o verrà ignorato per impostazione predefinita?

Answer 1

A meno di guardare il codice sorgente di un browser, non credo ci sia alcun modo per saperlo. Le specifiche ci dà un suggerimento:

Quando una forma o un'immagine viene dipinta, i programmi utente devono seguire questi passaggi, nell'ordine dato (o agiscono come se lo facessero):

Rendering della forma o dell'immagine su una bitmap nera trasparente infinita

Nota la parola "infinito".Quindi le specifiche suggeriscono che il browser dovrebbe eseguire il rendering di cose che sono oltre i limiti della tela.Ma se dovessi indovinare, la maggior parte dei browser noterà che la forma è al di fuori della regione di ritaglio corrente e interromperà la chiamata.Non c'è modo di eseguire il rendering di qualcosa oltre i limiti della tela e poi "scorrerla" nella vista, la tela non ne ha il concetto.

Answer 2

creo questa demo http://jsbin.com/okoful/edit#javascript,html, live usando due canvas e concludo che se disegniamo al di fuori del canvas non verrà visualizzato.

var canvas1 = document.getElementById('canvas1');
var ctx1 = canvas1.getContext('2d');
ctx1.fillRect(50, 50, 300, 300);
var canvas2 = document.getElementById('canvas2');
var ctx2 = canvas2.getContext('2d');
ctx2.translate(0,0);
ctx2.drawImage(ctx1.canvas,0,0);

$ ("# debug"). text ("Output:");

Answer 3

In realtà è diverso per browser diversi e comandi di disegno diversi.

IE9 è diventato più saggio e non esegue alcuna operazione sulle chiamate drawImage se l'immagine è fuori dai limiti della tela.Questo si nota facilmente nel profiler delle prestazioni di IE9.

Questa potrebbe essere un'ottimizzazione che viene eseguita solo quando la matrice di trasformazione è l'identità, altrimenti non ho verificato.

Gli altri browser sono diversi, ovviamente!