I don't seem to be able to find an answer to this one. I have a map of hex tiles. I wish to implement scrolling.

Code at present:

drawTilemap = function() {
    actualX = Math.floor(viewportX / hexWidth);
    actualY = Math.floor(viewportY / hexHeight);
    offsetX = -(viewportX - (actualX * hexWidth));
    offsetY = -(viewportY - (actualY * hexHeight));

    for(i = 0; i < (10); i++)
    {
        for(j = 0; j < 10; j++)
        {
            if(i % 2 == 0) {
                x = (hexOffsetX * i) + offsetX;
                y = j * sourceHeight;
            } else {
                x = (hexOffsetX * i) + offsetX;
                y = hexOffsetY + (j * sourceHeight);
            }

            var tileselected = mapone[actualX + i][j];

            drawTile(x, y, tileselected);
        }
    }
}

The code I've written so far only handles X movement. It doesn't yet work the way it should do. If you look at my example on jsfiddle.net below you will see that when moving to the right, when you get to the next hex tile along, there is a problem with the X position and calculations that have taken place.

It seems it is a simple bit of maths that is missing. Unfortunately I've been unable to find an example that includes scrolling yet.

http://jsfiddle.net/hd87E/1/

Make sure there is no horizontal scroll bar then trying moving right using the -> right arrow on the keyboard. You will see the problem as you reach the end of the first tile.

Apologies for the horrid code, I'm learning!

Cheers