There are several things in your code that don't make sense.
For instance, you *SEEM* to specify that the size of a "grass" image is 50x50 pixels. You *SEEM* to do that here:
But that's all wrong, because you are using #grass
so that style will *ONLY* affect an element which has id="grass"
. If it was meant to affect MANY elements, it should have been specified as .grass
and then the elements would use class="grass"
In any case, when you increment the positions where you draw the images, you only increase by 25 pixels to the right and down.
The increases *MUST* match the sizes of the images you are dropping in there.
When you reset the tilePos you do
yet in the initialization code you did
But both of them needlessly complicate matters.