Canvas rotated text artifacts

Question

I use Processing.js to display some 45 degrees rotated text on an image.

The problem is that after roation the text becomes hard to read as artifacts become visible, letter spacing is not constant or letters do not have the same bottom line.

Here is a demo.

You can see that the second "Hello World" has the ‎Ø sign instead of e and o. Also, at 8th the letter spacing problem is obvious.

Is there a way to fix this? At least for 45 degrees rotated text.

Here's a screenshot. I know that here seems like it's not of a big deal, but the final image has to be perfect and this bug really stands out.

Answer 1

I can't give a specific solution for processing but if you are ok with a generic answer you can do the following and then possibly integrate that with processing:

Chrome's text ability is currently poor (I believe a left-over from WebKit) not just with canvas but in general. This becomes especially visible when rotation is applied. The (backward) "ø" you see is in fact the e but due to the poor text engine and rounding errors the details melts together and it ends up looking like a Nordic char in this case.

A work-around is to draw the text you want to rotate to an off-screen canvas with no rotation applied, then use that canvas as an image that you draw to your main canvas to which rotation is applied.

This will produce a much better result and also perform better as normal image interpolation is used instead of the text engine.

An example can be:

/// draw text to off-screen canvas
osCtx.font = '12px arial';
osCtx.textBaseline = 'top';
osCtx.fillText(txt, 0, 0);

/// draw off-screen canvas rotated to main canvas
ctx.translate(w * 0.5, h * 0.5);
ctx.rotate(0.5);
ctx.drawImage(osCanvas, 0, 0);

Online demo here

Which will result in the same text looking like this instead:

versus drawn directly as text: