Enable subpixel/ClearType/LCD antialiasing in CanvasKit

190 views

Skip to first unread message

Roman Petrov

unread,

Sep 24, 2021, 9:27:10 AM9/24/21

to skia-discuss

I know that Chrome on Windows is able to render text using ClearType (I see different colors when looking into zoomed text).

I am trying to achieve the same in CanvasKit like so:

<!DOCTYPE html>

<html>

const loadFont = fetch(

"https://storage.googleapis.com/skia-cdn/misc/Roboto-Regular.ttf"

).then((response) => response.arrayBuffer());

Promise.all([CanvasKitInit(), loadFont]).then(([CanvasKit, robotoData]) => {

const surface = CanvasKit.MakeCanvasSurface("foo");

const canvas = surface.getCanvas();

canvas.clear(CanvasKit.Color4f(0.9, 0.9, 0.9, 1.0));

const fontMgr = CanvasKit.FontMgr.RefDefault();

const roboto = fontMgr.MakeTypefaceFromData(robotoData);

const textPaint = new CanvasKit.Paint();

textPaint.setColor(CanvasKit.BLACK);

textPaint.setAntiAlias(true);

const textFontSubpixel = new CanvasKit.Font(roboto, 10);

textFontSubpixel.setEdging(CanvasKit.FontEdging.SubpixelAntiAlias);

textFontSubpixel.setSubpixel(true);

canvas.drawText('SubpixelAntiAlias: Sample text', 200, 280, textPaint, textFontSubpixel);

const textFontAntiAlias = new CanvasKit.Font(roboto, 10);

textFontAntiAlias.setEdging(CanvasKit.FontEdging.AntiAlias);

textFontAntiAlias.setSubpixel(true);

canvas.drawText('AntiAlias: Sample text', 200, 300, textPaint, textFontAntiAlias);

const textFontAlias = new CanvasKit.Font(roboto, 10);

textFontAlias.setEdging(CanvasKit.FontEdging.Alias);

textFontAlias.setSubpixel(true);

canvas.drawText('Alias: Sample text', 200, 320, textPaint, textFontAlias);

surface.flush();

});

</script>

</body>

</html>

But I see no difference when using CanvasKit.FontEdging.AntiAlias and CanvasKit.FontEdging.SubpixelAntiAlias, rendered text looks the same.

Does anyone know if it is possible to get LCD antialiasing using CanvasKit?

I am able to build CanvasKit locally, I have installed all necessary tools. Maybe, it is possible to have CanvasKit custom build with LCD antialiasing support?...

Reply all

Reply to author

Forward

0 new messages