drag a scaled html canvas

I'm working on a canvas application, and implemented a zoom-in and out function using scale() and translate(). After zooming in, my canvas is actually bigger than it's seen on the screen, so I want to implement a drag and drop function for the whole c开发者_Go百科anvas.

How can I do it?

Drag and drop what exactly?

You mean drag the whole canvas scene around? That's known as mouse-panning.

On the mousedown event, begin panning and save the mouse position

On the mousemove event, translate the context (ctx.translate(x,y)) by the difference between the current mouse position and the original position, then redraw the scene.

On the mouseup event, stop panning.

(There are harder ways, for instance you could implement scrollbars inside or outside the canvas)