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?
- 1I'm looking for exactly the same thing. Did you find an answer?SystemicPlural– SystemicPlural2011-05-25 07:56:36 +00:00Commented May 25, 2011 at 7:56
Add a comment |
2 Answers
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
Comments
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
