Как оптимизировать отображение изображений canvas?

Question

[reaget]

Здравствуйте!
Начал делать проект: на холсте много картинок, по ним можно передвигаться, как в гугл картах, можно масштабировать. Только вот в чем проблема: если добавить около 10 картинок, которые весят в районе 4 МБ, то всё начинает жутко тормозить.

Почему?

Вот код: https://jsfiddle.net/pttg0Lq4/1/

Comments

[twobomb]

Не знаю у меня не тормозит, ну попробуй их уменьшить. И еще кривовато работает драг & дроп, событие mouseup ставь на window.

[reaget]

twobomb, не тормозит, потому что картинок мало, сделать больше пойдут тормоза)

[reaget]

twobomb, можете сейчас посмотреть? Я добавил картинок.

[twobomb]

reaget, у меня не тормозит вот только картинки прогружаются постепенно, можно загрузку какую нибудь сделать, и кривой drag&drop бесит

Answer 1

[kurtov]

Когда хотят что то быстрое на канвасе, как правило упоминают requestAnimationFrame и WebGL. А с использованием стороней либы решать такие задачи можно быстро и легко. Например pixi.js