How to have an infinitely big canvas?

Question

I am building a web app that uses a canvas to draw on. I would like to have an infinitly big drawing space (you can scroll as long as you want in any direction) AND save the dat

Answer 1

I have made a library to deal with this called TiledCanvas It provides interfaces to zoom and move. And draw in an infinite space using all the canvas apis.

It lets you load chunks dynamically based on coordinates, you just give it a function that gets as paramters a x, y and callback and you simply give it back something that can be drawn on a canvas.

https://github.com/Squarific/TiledCanvas

Answer 2

This is a bit unconventional a method, but just struck me as potentially (in theory, with unbound storage space) infinite.

You will need to store a currently loaded chunk of the board, given as a unique ID of some sort. The chunks and their data need to be in a table with the following columns:

• Chunk ID
• Chunk Data
• ID of chunk to the north
• ID of south
• ID of east
• ID of west

You need to make the canvas draggable, perhaps by using jQuery or similar (this question has some info on that).

Now, create an event listener for the canvas to be dragged, and track the distance it moves. When released, if the canvas has not changed to a different chunk, do nothing.

If the canvas has left the current chunk, use the stored ID to find the next chunk to load. If the ID is 0, assume the chunk does not yet exist, and create it. Otherwise, load the chunk, replacing the existing chunk. Set the canvas back to centered.

With long enough IDs and enough storage space, this will give you an infinite canvas, as no coordinate system is used. It also allows for wrapping the edges, or creating wormholes.

How to implement it, I'm not quite sure, but you only need to track how far the canvas has been moved. Google Maps does something similar, so I would look at how they handle it (I will do so shortly and see if I can add some implementation details to this answer).

This may not be the most practical or simplest method, but it was fun to come up with.

Edit: I believe this is along the lines of the basic functionality: http://candrews.net/blog/2010/10/introducing-sprymap/ It is a light-weight draggable javascript map. You simply need to track how far, then.