HTML5 холст drawImage медленный, когда исходные и целевые холсты одинаковы?

Question

Я заметил, что функция drawImage в 1000+ раз медленнее, когда оба источника и места назначения одинаковы. Почему это ? Какие полотна идут на GPU, а что нет? Любая помощь по этой теме была бы очень оценена.

Спасибо!

Answer 1

При использовании холста в качестве источника и назначения, браузер должен делать (есть мелкие этапы, но они являются основными):

• Создать царапание растрового для копирования
• Скопируйте точечный растровый рисунок в растровое изображение нуля
• Скопируйте растровое изображение с нуля в исходное растровое изображение в другом положении (т. Е. DrawImage (холст, ...));
• Удалить скретч

это вместо того, при использовании отдельных полотен:

• Скопировать растровый к месту назначения растрового

Почему не просто "блиттинг"? official standard define этот случай, таким образом, (курсив мой):

Когда холст или объект CanvasRenderingContext2D является обращается на себя, модель рисования требует источник должен быть скопирован до того, как изображение поэтому можно скопировать части холста или растрового изображения нуля на перекрывающиеся части.

Также обратите внимание на Drawing Model для этапов.