fix: canvas debug information not showing

[SamuelScheit]

I've tried to measure the rendering performance of the <Canvas /> component and enabled the debug option by setting debug to true:

export default function App() {
	const paint = Skia.Paint();
	paint.setColor(Skia.Color("rgb(255,0,0)"));

	return (
		<Canvas mode="continuous" style={{ flex: 1, margin: 50, borderWidth: 1 }} debug={true}>
			{new Array(100).fill(0).map((_, i) => (
				<Rect key={i} x={i * 10} y={i * 10 + 200} width={100} height={100} paint={paint} />
			))}
		</Canvas>
	);

and in early versions this worked and displayed the render time and average fps, however not anymore in the latest version 1.4.2. (I unfortunately don't know when this bug got introduced)

Before

Android	iOS

react-native-skia/packages/skia/cpp/rnskia/RNSkDomView.cpp

Lines 133 to 138 in ddfa6eb

	auto font = SkFont();
	font.setSize(14);
	auto paint = SkPaint();
	paint.setColor(SkColors::kRed);
	canvas->drawSimpleText(debugString.c_str(), debugString.size(),
	SkTextEncoding::kUTF8, 8, 18, font, paint);

To find the issue I've called measureText in RNSkDomView.cpp and found out that it returned 0.
This means the text won't be rendered, probably because no valid font was registered/found.
I've fixed this issue by getting the system font manager and initializing the font in the constructor:

auto style = SkFontStyle::Normal();
auto fontMgr = _platformContext->createFontMgr();
auto _typeface = fontMgr->matchFamilyStyle("Arial", style);
_font = SkFont(_typeface, 14);

and just reuse the _font when rendering the debug overlay:

canvas->drawSimpleText(debugString.c_str(), debugString.size(), SkTextEncoding::kUTF8, 8, 18, _font, paint);

After

Android	iOS

[wcandillon]

Hello Samuel,

Thank you for this PR. I'm a bit torn about this. This is not a feature that will be available in the future. We also suspect that the current information in the debug prop might be somewhat erroneous. As this debug into be useful to you?

[SamuelScheit]

Yes, it's very useful.
I'm currently implementing a custom skia list renderer and I need a way to measure the performance and fps.
Especially to see frame drops when scrolling and rerendering.
If FPS is erroneous an alternative would be to display the amount of dropped frames

[wcandillon]

we have reasons to believe that information might not be correct on Android, if you are building your own renderer, wouldn't be better to measure/display debug info on your side? But I think we will merge this change nonetheless 👍 Thank you for this.