Sidescrolling with HTML5 canvas

I have a canvas with the following size: 500x200. Inside this canvas i'm drawing some number of blocks (actually - table cells). Information about how much blocks i should draw i'm getting via AJAX, but size for every cell is fixed - 100x50. So, i can display inside my canvas only 5 blocks horizontally and 4 vertically. But what about other blocks? What if script return a table 30x30 cells. How can i side scroll (mouse preferred) my canvas so user can th开发者_StackOverflow中文版e rest of the cells (no zoom out, only scrolling).

If you need any more information, please, tell me and i will provide it. Thank you.

The easiest way to accomplish this is to implement mouse-panning.

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

On the mouse move 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 mouse up event, stop panning.

There are harder ways. You could implement scrollbars inside the canvas, as Mozilla Bespin has done (...which became Mozilla Skywriter which then merged with Ace and dropped all Canvas use). The code that they used was pretty good.

Or you could implement DOM scrollbars for use with your canvas, which isn't exactly easy to get right in all cases. This involves adding several dummy divs in order to give the appearance and function of real scrollbars. I have done this but the code remains unreleased for now. But thats no reason you can't give it a try if thats what you really want.

Check out a great tutorial at: http://www.brighthub.com/hubfolio/matthew-casperson/blog/archive/2009/06/29/game-development-with-javascript-and-the-canvas-element.aspx

It will give you an answer to your question and much much more...

I'm with Simon Sarris on this, but as an alternative, you could clone the canvas, and replace it with a blank canvas, and then render the original canvas as an image. I've some MooTools js that goes like this, which is fine for my use, by ymmv:

    var destinationCanvas = this.canvas.clone()l
    destinationCanvas.cloneEvents( this.canvas, 'mousemove');
    var destCtx = destinationCanvas.getContext('2d');
    destCtx.drawImage(
        this.canvas, 
        (this.options.scrollPx)*-1, 
        0
    );
    destinationCanvas.replaces( this.canvas );
    this.canvas.destroy();
    this.canvas = destinationCanvas;
    this.ctx        = destCtx; // this.canvas.getContext('2d');