I’m just getting started with the canvas element and I want to create something like the panning element here: and for the sake of clarity, it’s pictured here:
.
I’d like to maintain very similar functionality. to the example that I posted. I’ve made a rough mockup (excuse terrible quality of code) of what I’d like to do. So, I’ve recently switched my graphics to employ canvas rather than clumsily styled DOM elements and I was wondering if it’d be wise to take the same route for this panning element. Also, how can I avoid redrawing the entire frame every time the panning element is moved or resized?
You can do it in a similar way with your mouse events on the canvas element and use them to determine what to draw on your canvas, to avoid the redraw you can selectively clear parts of the frame and redraw that part as that part changes using the clearRect function, http://dev.opera.com/articles/view/html-5-canvas-the-basics/ under the basic lines and strokes section.