html5 - Best technique for drawing isometric tiles

I'm thinking about making a simple isometric game with HTML5 Canvas, and wondering what's the fastest way to render the tiles.

Since the tiles are diamond shaped, but drawImage draws rectangles, I have to leave out the corners (the black parts in the following):

I think that leaves me with three options:

1. Use Image objects with alpha channels (.png). I'm afraid this might kill performance.


2. Use a clipping path. If the renderer is optimized this could be pretty fast.


3. Prerender square tiles, like this:

I'd have the black square as one actual tile in memory, and I'd draw such a tile for the green field, and all fields next to it, or above and below. The diagonal (blue) fields would be make up of the corners of the rectangular tiles. This would avoid clipping or alpha channels, but I would have to prerender all possible combinations of tiles, and it seems like overkill.

What's the best or fastest way to do isometric tiles? What do other games, like FarmVille, use?