Issue with Fonts rendering on Web

[Aditya Nellutla]

Hello All,

      I have been observing some issue with basic font rendering when running app on browser which otherwise seem to work on desktop app.

For ex:

sk_sp<SkTypeface>  typeface = SkTypeface::MakeFromName("DejaVu Sans Mono", SkFontStyle());

Returns NULL on web but works on Desktop App

-----------------------------------------

Similarly I have tried this simple example :

 SkPath fontPath;                                                                      

 const char text[] = "SKIA Test";                                                   

  SkFont font2(SkTypeface::MakeDefault(), 30);                                        

SkTextUtils::GetPath(text, strlen(text), SkTextEncoding::kUTF8, 0, 0, font2, &fontPath)        SkRect rect = fontPath.getBounds();         

This returns NULL bounds for path when run on browser but works on desktop app.

Any idea what could be the issue here?  Your valuable inputs will be appreciated.

Regards,

Aditya

[Shachar Langbeheim]

Hi, how are you running Skia in the browser? Using CanvasKit or by compiling the skia libraries with your own code?
If it's the second option (and maybe also with CanvasKit), then you don't have access to OS fonts. If you haven't somehow loaded the "DejaVu" font to WASM's linear memory and then pointed Skia at the file, then it's no surprise that Skia can't find the font.

--
You received this message because you are subscribed to the Google Groups "skia-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to skia-discuss...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/skia-discuss/49507e02-d2f0-4c74-bc18-10987c537da7n%40googlegroups.com.

[Aditya Nellutla]

Thanks thats precisely is the case, we are looking at addressing it.

[Peter Verswyvelen]

Please see my wasm demo were I load a font compiled in the code itself

https://github.com/Ziriax/SkiaWasmDemo

I am not sure if the code still works, it is an old repository, but you can maybe borrow the code for loading a typeface.

To view this discussion on the web visit https://groups.google.com/d/msgid/skia-discuss/CA%2B_KjGa7Dw5nd%2BuBwHQr6TRLoC5LHOPCeZEnEUeacsphq600tw%40mail.gmail.com.

[kjlu...@google.com]

CanvasKit (and any other JS app) does not have access to the fonts on the users machines (although there are web standards discussions to change this).

As is, you must fetch the font data yourself and load it into CanvasKit:

https://jsfiddle.skia.org/canvaskit/960866c81930ecec4c082434a7ff6554ca6b1ca02bf3367a4d8a5921f892c2bc

 For the convenience of examples and getting started, it is compiled with Noto Mono. It is expected that clients will load all the fonts they need.

For other examples of CanvasKit API usages, I suggest looking at the unit tests, e.g.

https://github.com/google/skia/blob/main/modules/canvaskit/tests/font.spec.js

[Shachar Langbeheim]

If you're using the Skia libraries and not CanvasKit, you can use Emscripten filesystem API to load the files to WASM's memory, and then they can be accessed using the path passed to emscripten.

https://emscripten.org/docs/api_reference/Filesystem-API.html

To view this discussion on the web visit https://groups.google.com/d/msgid/skia-discuss/CAOo4A_8G02nyLC-hwo9uh45TNOz7WU1xRib8gjP%2BL7TtTfmL%2Bg%40mail.gmail.com.

[Panutat Tejasen]

Hi everyone,

Could anyone point me to the proper way to use alpha channel from on skImage to do an image mask to draw another skImage to the skCanvas?

Best Regards,
Panutat