CODEWITHSUNDEEP
htmlgoogle-mapscanvasdrag
Amit
Amit

Reputation: 151

"googlemaps" dragging with html5 canvas

I have a large html5 canvas (much larger than the screen), and I want to implement a "google-maps" dragging. I want the canvas to be dragable by mouse, and I want it to render only the part we can see on the screen each time I drag it. Does someone have a good idea?

Upvotes: 6

Views: 2255

Answers (2)

Tim
Tim

Reputation: 1958

To render your canvas only on the part of the screen that we can see you could use the drawImage function : drawImage(image, x, y, width, height)

With "image" as your original entire canvas, "x" and "y" representing the offset that move when dragging and "width/height" the size of the actual windows.

See documentation : http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-drawimage

and a great tutorial from mdc : https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images

Upvotes: 0

SystemicPlural
SystemicPlural

Reputation: 5789

I solved this problem by using the jQuery UI draggable component on the canvas element. I enclosed it in a div - with overflow set to hidden, and made the canvas as large as I need it to be. Works a charm

http://jqueryui.com/demos/draggable/

Upvotes: 3

Related Questions