I've been working on porting an old closed source game to Javascript with Canvas and I've come to a slight problem.

Right now, to display the land, I just have a pretty basic loop that just draws the 44px by 44px diamond-shaped tiles using ctx.drawImage().

It essentially looks like the left side of the image, while I need them to "stretch" to fill the entire tile (like on the right). The tiles have a Z axis which is just in the +j direction on the screen and it's supposed to look like a hill or incline.

Anyway, this leads to my question: Is there a way to correctly do this without using webgl? If not: would it be better to use webgl directly to do this, or use a library to handle it for me?

There is an open source example written in C# for XNA that I was looking at which correctly renders tiles, but I can't seem to do anything like it in Javascript: https://code.google.com/searchframe#WoZ9Hre0UW0/trunk/UltimaXNA/UltimaXNA/TileEngine/Objects/MapObject.cs&q=drawiso%20package:ultimaxna\.googlecode\.com