Как сделать эффект передвижения, по изображению, в окне canvas'a?

Question

[Владимир]

К примеру у меня ограниченный canvas, меньшей ширины/высоты, чем загруженное изображение в нем
Ребят, как сделать эффект передвижения, по изображению, в окне канваса? Другими словами окно канваса не изменяется, а по картинке мы "бегаем". Спасибо.

Comments

[dummyman]

На сколько помню, картинка не может быть больше канвы.
Тут либо помещать канвас с полной картинкой внутрь элемента нужного размера.
Либо постоянно перезагружать нужный фрейм картинки (таким образом памяти жрет меньше, но в ущерб плавности анимации).

[dummyman]

Можно еще использовать многотайловый интерфейс openlayers.org

[Владимир]

dummyman: спасибо, но нужно умудриться "впихнуть" картинку целиком(

[dummyman]

Владимир: да невопрос, надо просто выбрать один из вариантов наиболее подходящий по ситуации...

Answer 1

[twobomb]

Если правильно понял то вот что получилось.

Comments

[Владимир]

Спасибо, то что нужно!

Answer 2

[TheLostRoot]

Если вы про вертикальный и горизонтальный скролл то можно обернуть canvas в div и дать ему стиль:

.img_wrap {
width: 500px;
height: 250px;
overflow: hidden
}

Но учтите что максимальный размер canvas-а ограничен. 32000 px в хроме кажется.

Или другой путь ловить ловить mousemove с mousedown на canvas-е и каждый раз отрисововать картинку заново обрезав её предварительно через drawImage