Какой самый быстрый способ перемещения прямоугольной (пиксельной) области внутри элемента HTML5 canvas

Question

Я хочу реализовать вертикальную прокрутку содержимого элемента HTML5 canvas. Я не хочу рендерить весь контент снова. Вместо этого я хотел бы переместить весь контент вниз / вверх и отображать только ту область, которая была прокручена.

Я экспериментировал с функциями getImageData и putImageData, но в моих тестах они почти такие же медленные, как перерисовка всей сцены.

// scroll 20px down
var data = ctx.getImageData(0, 0, width, height-20);
ctx.putImageData(0, 20);

Какой самый быстрый способ скопировать прямоугольные области пикселей внутри элемента canvas?

Answer 1

Попробуйте это:

ctx.drawImage(ctx.canvas, 0, 0, width, height-20, 0, 20, width, height-20);

drawImage может принимать HTMLImageElement, HTMLCanvasElement или HTMLVideoElement в качестве первого аргумента.

Answer 2

Для абсолютной скорости я бы использовал <canvas> большого размера внутри <div> с набором overflow:hidden, затем использовал бы обычные методы DOM для прокрутки <canvas> внутри <div>.

Конечно, это жертвует использованием памяти в пользу скорости.