Enable subpixel/ClearType/LCD antialiasing in CanvasKit

25 views
Skip to first unread message

Roman Petrov

unread,
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>
<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();
          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