¿HTML5 Canvas se procesa fuera de la pantalla de forma predeterminada?

Question

Si hago esto:

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

Y esto:

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

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

¿Se renderizará el rectángulo o se ignorará de forma predeterminada?

Answer 1

Aparte de mirar el código fuente de un navegador, no creo que haya forma de saberlo. La especificación nos da una pista:

Cuando se pinta una forma o imagen, los agentes de usuario deben seguir estos pasos, en el orden dado (o actuar como si lo hicieran):

Renderice la forma o imagen en un mapa de bits negro transparente infinito

Tenga en cuenta la palabra 'infinito'.Entonces, la especificación sugiere que el navegador debería representar cosas que están más allá de los límites del lienzo.Pero si tuviera que adivinar, la mayoría de los navegadores notarán que la forma está fuera de la región de recorte actual y dejarán de llamar.No hay forma de renderizar algo más allá de los límites del lienzo y luego "desplazarlo" a la vista, el lienzo no tiene ningún concepto de eso.

Answer 2

Creo esta demostración http://jsbin.com/okoful/edit#javascript,html, en vivo usando dos lienzos y concluyo que si dibujamos fuera del lienzo no lo renderizará.

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 ("Salida:");

Answer 3

En realidad, es diferente para diferentes navegadores y diferentes comandos de dibujo.

IE9 se ha mejorado y no realiza ninguna operación en las llamadas a drawImage si la imagen está fuera de los límites del lienzo.Esto se nota fácilmente en el generador de perfiles de rendimiento de IE9.

Esta podría ser una optimización que solo se realiza cuando la matriz de transformación es identidad, no he verificado lo contrario.

¡Otros navegadores difieren, por supuesto!