Adding user interaction to canvas element

Question

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:

panning element .

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?

Declan Cook · Accepted Answer · 2011-06-09 19:36:15Z

1

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.

answered Jun 9, 2011 at 19:36

Declan Cook

6,1362 gold badges37 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jakub Nurski Over a year ago

I've seen an implementation based on this answer. It's really hard to maintain and pretty hacky method for me.

Collectives™ on Stack Overflow

Adding user interaction to canvas element

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related