Comparison of rendering fonts using canvas2d and canvaskit

44 views
Skip to first unread message

Daolin Liu

unread,
Jun 11, 2024, 7:16:22 AMJun 11
to skia-discuss
Hi,

I would like to ask a more basic question. Is it normal for the display effect to differ between using the drawText interface of canvas and using the native fillText interface of canvas to draw the same text (using the same font)?

e.g.:

1. with canvas2d, some basic code like this (in html file):
var canvas = document.getElementById("myCanvas")
var ctx = canvas.getContext('2d');
ctx.font = "16px Microsoft YaHei";
ctx.fillText("test", 0, 20);

2. with canvaskit api, some basic code like this (in JS file):
let surface = CanvasKit.MakeWebGLCanvasSurface(testCanvas, null)
let canvas = surface.getCanvas()
let textPaint = new CanvasKit.Paint()
textPaint.setAntiAlias(true)
let textFont = new CanvasKit.Font(null, 20)
canvas.drawText('test', 10, 60, textPaint, textFont)

I can make sure both of them use Microsoft YaHei font. For Chinese characters, the difference feels more pronounced. In addition, it seems that for the same text in html <dev> or <p> (not in canvas element), the same result as canvas2d display effect.

Is it due to differences in rendering engines? Is there a solution?

Thanks!
Dorian

Daolin Liu

unread,
Jun 12, 2024, 7:35:07 AMJun 12
to skia-discuss
I forgot to mention that the environment is win10. Is it because canvaskit cannot use DirectWrite in a sandbox?

Brian Osman

unread,
Jun 12, 2024, 7:37:41 AMJun 12
to skia-d...@googlegroups.com
That is probably part of it - CanvasKit is restricted to using web APIs (and the code that's compiled to WASM), so it can't use the native font libraries. (It always uses freetype).

--
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/46baade5-be95-42f4-885c-1fa9481c0bc2n%40googlegroups.com.
Reply all
Reply to author
Forward
0 new messages