Canvas-kit text rendering on high-DPI devices
282 views
Skip to first unread message
Denis Rochette
Oct 15, 2023, 12:31:10 PM10/15/23
to skia-discuss
Hi,
I'm trying to display some text using canvas-kit on my retina screen (window.devicePixelRatio=2). But given a fixed font, the rendering on the canvas-kit canvas is very different from the same text in a <div> with the same font (see image).
I think there's something very basic I don't understand.
Here's the code that compares canvas-kit's canvas, a simple <div> and an html <canvas>:
I'm trying to display some text using canvas-kit on my retina screen (window.devicePixelRatio=2). But given a fixed font, the rendering on the canvas-kit canvas is very different from the same text in a <div> with the same font (see image).
I think there's something very basic I don't understand.
Here's the code that compares canvas-kit's canvas, a simple <div> and an html <canvas>:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Handlee">
<script src="https://unpkg.com/canvaskit-wasm@latest/bin/canvaskit.js"></script>
</head>
<body>
<div>Skia:</div>
<canvas id="skiaCanvas" width="200" height="30"></canvas>
<div>HTML:</div>
<div style='font-size: 24pt; font-family: "Handlee";'>Lorem ipsum</div>
<div>Canvas:</div>
<canvas id="htmlCanvas" width="200" height="30"></canvas>
<script>
dpr = window.devicePixelRatio;
loadFont = fetch('https://fonts.gstatic.com/s/handlee/v18/-F6xfjBsISg9aMakPm3wowtKzig.woff2').then((response) => response.arrayBuffer());
ckLoaded = CanvasKitInit({locateFile: (file) => 'https://unpkg.com/canvaskit-wasm@latest/bin/'+file});
Promise.all([ckLoaded, loadFont]).then(([CanvasKit, handleeData]) => {
// Skia Canvas
skiaCanvas = document.getElementById("skiaCanvas");
skiaCanvasRect = skiaCanvas.getBoundingClientRect();
skiaCanvas.width = skiaCanvasRect.width * dpr;
skiaCanvas.height = skiaCanvasRect.height * dpr;
skiaCanvas.style.width = skiaCanvasRect.width + 'px';
skiaCanvas.style.height = skiaCanvasRect.height + 'px';
skiaSurface = CanvasKit.MakeSWCanvasSurface(skiaCanvas);
skiaCanvas = skiaSurface.getCanvas();
typeFace = CanvasKit.Typeface.MakeFreeTypeFaceFromData(handleeData);
font = new CanvasKit.Font(typeFace, 24);
paint = new CanvasKit.Paint();
paint.setColor(CanvasKit.BLACK);
skiaCanvas.scale(dpr, dpr);
skiaCanvas.clear(CanvasKit.WHITE);
skiaCanvas.drawText("Lorem ipsum", 0, 25, paint, font);
skiaSurface.flush();
// HTML Canvas
htmlCanvas = document.getElementById("htmlCanvas");
htmlCanvasRect = htmlCanvas.getBoundingClientRect();
htmlCanvas.width = htmlCanvasRect.width * dpr;
htmlCanvas.height = htmlCanvasRect.height * dpr;
htmlCanvas.style.width = htmlCanvasRect.width + "px";
htmlCanvas.style.height = htmlCanvasRect.height + "px";
ctx = htmlCanvas.getContext("2d");
ctx.scale(dpr, dpr);
ctx.font = '24pt "Handlee"';
ctx.fillText("Lorem ipsum", 0, 25);
});
</script>
</body>
</html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Handlee">
<script src="https://unpkg.com/canvaskit-wasm@latest/bin/canvaskit.js"></script>
</head>
<body>
<div>Skia:</div>
<canvas id="skiaCanvas" width="200" height="30"></canvas>
<div>HTML:</div>
<div style='font-size: 24pt; font-family: "Handlee";'>Lorem ipsum</div>
<div>Canvas:</div>
<canvas id="htmlCanvas" width="200" height="30"></canvas>
<script>
dpr = window.devicePixelRatio;
loadFont = fetch('https://fonts.gstatic.com/s/handlee/v18/-F6xfjBsISg9aMakPm3wowtKzig.woff2').then((response) => response.arrayBuffer());
ckLoaded = CanvasKitInit({locateFile: (file) => 'https://unpkg.com/canvaskit-wasm@latest/bin/'+file});
Promise.all([ckLoaded, loadFont]).then(([CanvasKit, handleeData]) => {
// Skia Canvas
skiaCanvas = document.getElementById("skiaCanvas");
skiaCanvasRect = skiaCanvas.getBoundingClientRect();
skiaCanvas.width = skiaCanvasRect.width * dpr;
skiaCanvas.height = skiaCanvasRect.height * dpr;
skiaCanvas.style.width = skiaCanvasRect.width + 'px';
skiaCanvas.style.height = skiaCanvasRect.height + 'px';
skiaSurface = CanvasKit.MakeSWCanvasSurface(skiaCanvas);
skiaCanvas = skiaSurface.getCanvas();
typeFace = CanvasKit.Typeface.MakeFreeTypeFaceFromData(handleeData);
font = new CanvasKit.Font(typeFace, 24);
paint = new CanvasKit.Paint();
paint.setColor(CanvasKit.BLACK);
skiaCanvas.scale(dpr, dpr);
skiaCanvas.clear(CanvasKit.WHITE);
skiaCanvas.drawText("Lorem ipsum", 0, 25, paint, font);
skiaSurface.flush();
// HTML Canvas
htmlCanvas = document.getElementById("htmlCanvas");
htmlCanvasRect = htmlCanvas.getBoundingClientRect();
htmlCanvas.width = htmlCanvasRect.width * dpr;
htmlCanvas.height = htmlCanvasRect.height * dpr;
htmlCanvas.style.width = htmlCanvasRect.width + "px";
htmlCanvas.style.height = htmlCanvasRect.height + "px";
ctx = htmlCanvas.getContext("2d");
ctx.scale(dpr, dpr);
ctx.font = '24pt "Handlee"';
ctx.fillText("Lorem ipsum", 0, 25);
});
</script>
</body>
</html>
(I've simplified my problem here, but ideally I'd like to use canvas.drawGlyphs() for my project)
Ivan Espinosa
Apr 9, 2024, 3:47:12 PMApr 9
to skia-discuss
Hi,
Im facing the same issue. Where you able to find how to fix it?
Im facing the same issue. Where you able to find how to fix it?
Denis Rochette
May 19, 2024, 9:00:50 PMMay 19
to skia-discuss
hi,
No, I haven't tried in a while, but I wonder if it's just skia and the browser displaying the font differently for some reason.Have you fixed it?
Daolin Liu
Jun 11, 2024, 7:16:12 AMJun 11
to skia-discuss
Hi,
I have the same question. Can someone answer it?
Florin Malita
Jun 11, 2024, 9:05:47 AMJun 11
to skia-d...@googlegroups.com
The font size is expressed in different units: CanvasKit expects the equivalent of CSS' "px", while the rest of the example uses "pt".
You need to convert pt -> px when passing the same size to CK:
font = new CanvasKit.Font(typeFace, 24 * 96 / 72);
--
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/f307ef59-b02f-4b90-bb0c-ecf1ca4581c7n%40googlegroups.com.
Ivan Espinosa
Jun 11, 2024, 1:49:28 PMJun 11
to skia-discuss
Also make sure android browser is not doing font bosting. That might be affecting the final result of font size. You can check computed values of the html font size are the expected ones.
Reply all
Reply to author
Forward
0 new messages