How do I make an HTML5 canvas tiled map with tiles which have other than squared edges?

Question

I'm creating an HTML canvas map and I'm trying to have the edges of the tiles not appear square, as in the tiles merge in to each other. I've scoured the internet for hours but can't seem to find anything. How would I go about doing this?

Dropbox link to project

I've included the used images so when the project is downloaded and run on the browser, the map should look like the following picture. This is not how I want it to look but how it currently looks.

I know it's probably not possible to get this exact effect using a tile based map, and it's not a perfect representation, but here's a general idea of what I want to accomplish. Notice how the corners are no longer squared but have a more rounded look and appear to be blending in with the next color tile. That's my goal. Thanks in advance.

Answer 1

You need to create some transitional tiles like these:

_{Image source: http://opengameart.org/content/lpc-more-water-transitions (licensed under CC-BY-SA 3.0)}

As you can see there are tiles in this set which are half deep-water and half shallow-water. This allows you to design the transition from one texture to another in your image editor.

The same technique should be used whenever you transition from one ground type to another. Here is another example for a tileset which has transitions from sand to grass:

_{Source: http://opengameart.org/content/32x32-water-and-land-map-tilesets licensed under CC-0}

You will notice that this tileset also includes transitions from textures to transparency. This allows you to place a half-transparent tile on an upper layer and full tile with a different texture on another layer behind it to blend them into each other automatically. How well that looks depends on the textures.