HTML5 Canvas отображает вне экрана по умолчанию?

Question

Если я сделаю это:

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

А это:

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

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

Будет ли визуализирован прямоугольник или он будет игнорироваться по умолчанию?

Answer 1

Я создаю эту демонстрацию http://jsbin.com/okoful/edit#javascript,html,live, используя два холста, и я заключаю, что если мы рисуем за пределами холста, он не будет отображаться.(«Вывод:»);

Answer 2

Если не смотреть на исходный код браузера, я не думаю, что есть какой-либо способ узнать. Спецификация дает нам одну подсказку:

Когда рисуются фигура или изображение, пользовательские агенты должны выполнять эти шаги в указанном порядке (или действовать так, как если бы они это делали):

Визуализация фигуры или изображения на бесконечном прозрачном черном растровом изображении

Обратите внимание на слово «бесконечный».Таким образом, спецификация предполагает, что браузер должен отображать вещи, которые находятся за пределами холста.Но если бы мне пришлось угадывать, большинство браузеров заметят, что форма находится за пределами текущей области отсечения, и отбросят вызов.Нет способа визуализировать что-либо за пределами холста, а затем «прокрутить» его в представление, холст не имеет этого понятия.

Answer 3

Это на самом деле отличается для разных браузеров и разных команд рисования.

IE9 активизировался и не выполняет вызовов drawImage, если изображение выходит за границы холста.Это легко заметить в профилировщике производительности IE9.

Это может быть оптимизация, которая выполняется только тогда, когда матрица преобразования идентична, иначе я не проверял.

Другие браузеры отличаются,Конечно!