Enable subpixel/ClearType/LCD antialiasing in CanvasKit

Skip to first unread message

Roman Petrov

Sep 24, 2021, 9:27:10 AMSep 24
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>
  <body style="margin: 0; padding: 0">
    <canvas id="foo" width="800" height="600"></canvas>

    <script type="text/javascript" src="https://unpkg.com/canvask...@0.19.0/bin/canvaskit.js"></script>
    <script type="text/javascript">

        const loadFont = fetch(
        ).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();

          const textFontSubpixel = new CanvasKit.Font(roboto, 10);
          canvas.drawText('SubpixelAntiAlias: Sample text', 200, 280, textPaint, textFontSubpixel);

          const textFontAntiAlias = new CanvasKit.Font(roboto, 10);
          canvas.drawText('AntiAlias: Sample text', 200, 300, textPaint, textFontAntiAlias);

          const textFontAlias = new CanvasKit.Font(roboto, 10);
          canvas.drawText('Alias: Sample text', 200, 320, textPaint, textFontAlias);


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
0 new messages