Drawing multiple rotated images next to each other

Question

I'm trying to draw multiple rotated images next to each other on an HTML5 canvas, but unfortunately there's always a gap between them:

The idea is that I want to draw multiple blocks of different sizes using tiles. Each separate block can be rotates. When drawing such a block, I call the canvas's rotate function once to then draw all the tiles next to each other to form such a block.

At this point in time I don't really know what to do to solve the issue. Ofcourse I could use an offscreen canvas for each seperate block, but to my knowledge this will create some serious performance issues in my game since there can be a lot of these blocks, each with their own sizes, tiles and rotation.

Another option would be to use patterns, for this specific scenario that would be a viable option. But unfortunately I also need to draw blocks where the tiles on the edges get a different image .

What would be a good way to get rid of these gaps? Shall I just draw extra tiles in between to fill the gaps in a bit of an hacky way. Or is there an option I haven't thought of yet?

Edit: JSFiddle: https://jsfiddle.net/Oli414/oxap9fgr/2/ (It applies to drawing in general, not just images).

ctx.rotate(rotation * Math.PI / 180);
for (var i = 0; i < width; i++)
{
    for (var j = 0; j < height; j++)
  {
        ctx.fillRect(i * tileSize, j * tileSize, tileSize, tileSize);
  }
}

Answer 1

Steps:

1.: Create a fillStyle with the image, using ctx.createPattern(Image, wrap), and set wrap as "repeat" (Don't forget to wait before the image loads.

2.: Instead of drawing each image in a separate drawImage call, just use ctx.fillRect(beginX, beginY, width, height). This also has a better performance for bigger tiles.

There shouldn't be any gaps between the images.

If you don't like this idea, then you could simply oversize the image by 1 pixel in each direction.