How to draw large sized text on a canvas?

Question

I want to draw on canvas month's text vertical along screen height.

Paint init:

   this.paint = new Paint();
   this.paint.setAntiAlias(true);
   this.paint.setDither(true);
   this.paint.setSubpixelText(true);
   this.paint.setColor(color_text_dark);
   this.paint.setTextAlign(Align.RIGHT);

Drawing:

   // Set the scale to the widest month
   float scale = getHeight() / this.max_month_width;
   String month_string = FULL_MONTH_NAME_FORMATTER.
                         format(active_month_calendar.getTime());
   canvas.save();
   canvas.translate(getWidth(), 0);
   canvas.rotate(-90);
   canvas.scale(scale, scale);
   canvas.drawText(month_string, 0, 0, this.paint);
   canvas.restore();

Result looks good on hdpi screen, but very ugly and pixelated on xhdpi one.

I did more test on various devices, and understood what result depends on Android version, not screen density and resolution.

Code works fine on 2.x platform, but doesn't work on 4.0.3+. Suppose, Android draw implementation was changed here. Full code you can see here.

hdpi version 2.3.5 (also tested 2.2)

xhdpi version 4.2 (also tested 4.1, 4.0.3)

Trying different variations for paint antialias, subpixel text has no effect. How can I fix this issue?

Answer 1

The problem is that you're drawing text at one size and scaling the result up. Once you've determined how wide you want the text to be, you should use calls to Paint.measureText(), adjusting the size via Paint.setTextSize() accordingly. Once it measures correctly, then you do your call to Canvas.drawText().

An alternative would be to not measure the text at all and just immediately call:

paint.setTextSize(paint.getSize() * scale)

There's no guarantee the text will fit in this case, though.

None of your other transform calls should result in interpolation, so it should give you very sharp lines.

Edit

Here is a code sample and comparison screenshot:

canvas.save();
canvas.scale(10, 10);
canvas.drawText("Hello", 0, 10, mTextPaint);
canvas.restore();
float textSize = mTextPaint.getTextSize();
mTextPaint.setTextSize(textSize * 10);
canvas.drawText("Hello", 0, 300, mTextPaint);
mTextPaint.setTextSize(textSize);

Answer 2

I don't have enough reputation to comment on Krylez's excellent answer, but I'd like to reply to mcfly soft's comment/question about paths.

The idea is the same for paths as text. Instead of scaling and translating the canvas a path is drawn on, put the same scaling and translation into a matrix and pass that to Path.transform:

// instead of this:
canvas.scale(sX, sY);
canvas.translate(trX, trY);
canvas.drawPath(path);

// do this:
matrix.postScale(sX, sY);
matrix.postTranslate(trX, trY);
path.transform(matrix);
canvas.drawPath(path);