Comparison of rendering fonts using canvas2d and canvaskit

[Daolin Liu]

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]

I forgot to mention that the environment is win10. Is it because canvaskit cannot use DirectWrite in a sandbox?

[Brian Osman]

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.