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 data / images to a database.

Something has been done similar to that here: /, where the more people that play it, the larger it gets.

I know this would require somehow tiling images, saving them to a db, then only loding the ones within the viewport. How would this and the infinite scrolling be acplished / where should I start?

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 data / images to a database.

Something has been done similar to that here: http://wordsquared./, where the more people that play it, the larger it gets.

I know this would require somehow tiling images, saving them to a db, then only loding the ones within the viewport. How would this and the infinite scrolling be acplished / where should I start?

• javascript
• html

• 2 You can't have it be infinite, not properly, and you don't want to just load the next chunk in a direction, as you'll end up hitting the limits of your coordinate system. What you want to do is constantly recenter the canvas and keep track of that, loading new chunks when the center reaches the edge of the loaded area. – ssube Commented Aug 28, 2011 at 2:21
• What I mean is the more you scroll, the larger it gets. Of course I would need to set a limit EVENTUALLY, but I would like something that get scale to as large as I set it. – sdfadfaasd Commented Aug 28, 2011 at 2:25
• Possible duplicate of Make a canvas infinite – bummi Commented Dec 31, 2016 at 16:39

2 Answers 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 e up with.

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

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./Squarific/TiledCanvas