The snapshot taken with the offscreen.makeImageSnapshot() command using the drawText imperative API is very blurry.

[ReedYu]

import {
  Canvas,
  createPicture,
  Fill,
  Group,
  Image,
  matchFont,
  Picture,
  Skia,
  Text,
} from '@shopify/react-native-skia';
import React, { useEffect } from 'react';
import { Dimensions, Platform, View } from 'react-native';

const fontFamily = Platform.select({ ios: 'Helvetica', default: 'serif' });
const fontStyle = {
  fontFamily,
  fontSize: 12,
  fontStyle: 'italic',
  fontWeight: 'bold',
};
const font = matchFont(fontStyle);

const drawTextSnapshot = () => {
  const { width, height } = font.measureText('Hello World-TextComponent');

  const offscreen = Skia.Surface.Make(width, height);
  if (!offscreen) {
    return;
  }
  const canvas = offscreen.getCanvas();
  const paint = Skia.Paint();
  paint.setColor(Skia.Color('#000'));
  canvas.drawText('Hello World-DrawTextSnapshot', 0, height, paint, font);
  const snapshot = offscreen.makeImageSnapshot();
  return snapshot;
};

export default function Examples() {
  const [textSnapshot, setTextSnapshot] = React.useState<any>();

  const textPicture = createPicture((canvas) => {
    const paint = Skia.Paint();
    paint.setColor(Skia.Color('#000'));
    canvas.drawText('Hello World!-CreatePicture', 100, 60, paint, font);
  });

  useEffect(() => {
    const snapshot = drawTextSnapshot();
    setTextSnapshot(snapshot);
  }, []);

  return (
    <View style={{ flex: 1 }}>
      <Canvas
        style={{
          width: Dimensions.get('window').width,
          height: Dimensions.get('window').height,
        }}
      >
        <Fill color="white" />
        <Group>
          <Text
            x={100}
            y={fontStyle.fontSize + 20}
            text="Hello World-TextComponent"
            font={font}
          />
        </Group>
        <Group>
          <Picture picture={textPicture} />
        </Group>
        <Group>
          {textSnapshot && (
            <Image
              image={textSnapshot}
              x={100}
              y={70}
              width={textSnapshot.width()}
              height={textSnapshot.height()}
              fit={'contain'}
            />
          )}
        </Group>
      </Canvas>
    </View>
  );
}

Here is a comparison chart, with the third row being a snapshot using the imperative API drawText.

The smaller the font size, the blurrier it appears.

[wcandillon]

this is because you use two different units for each. The on screen elements are in pixel density and the offscreen canvas is in pixel: https://reactnative.dev/docs/pixelratio in offscreen I recommend doing: const offscreen = Skia.Surface.Make(width * pixelDensity, height * pixelDensity); canvas.scale(pixelDensity, pixelDensity); This will likely yield the result you expect.

…

On Mon, Jun 24, 2024 at 7:13 PM Reed ***@***.***> wrote: import { Canvas, createPicture, Fill, Group, Image, matchFont, Picture, Skia, Text, } from ***@***.***/react-native-skia'; import React, { useEffect } from 'react'; import { Dimensions, Platform, View } from 'react-native'; const fontFamily = Platform.select({ ios: 'Helvetica', default: 'serif' }); const fontStyle = { fontFamily, fontSize: 12, fontStyle: 'italic', fontWeight: 'bold', }; const font = matchFont(fontStyle); const drawTextSnapshot = () => { const { width, height } = font.measureText('Hello World-TextComponent'); const offscreen = Skia.Surface.Make(width, height); if (!offscreen) { return; } const canvas = offscreen.getCanvas(); const paint = Skia.Paint(); paint.setColor(Skia.Color('#000')); canvas.drawText('Hello World-DrawTextSnapshot', 0, height, paint, font); const snapshot = offscreen.makeImageSnapshot(); return snapshot; }; export default function Examples() { const [textSnapshot, setTextSnapshot] = React.useState<any>(); const textPicture = createPicture((canvas) => { const paint = Skia.Paint(); paint.setColor(Skia.Color('#000')); canvas.drawText('Hello World!-CreatePicture', 100, 60, paint, font); }); useEffect(() => { const snapshot = drawTextSnapshot(); setTextSnapshot(snapshot); }, []); return ( <View style={{ flex: 1 }}> <Canvas style={{ width: Dimensions.get('window').width, height: Dimensions.get('window').height, }} > <Fill color="white" /> <Group> <Text x={100} y={fontStyle.fontSize + 20} text="Hello World-TextComponent" font={font} /> </Group> <Group> <Picture picture={textPicture} /> </Group> <Group> {textSnapshot && ( <Image image={textSnapshot} x={100} y={70} width={textSnapshot.width()} height={textSnapshot.height()} fit={'contain'} /> )} </Group> </Canvas> </View> ); } Here is a comparison chart, with the third row being a snapshot using the imperative API drawText. examples.jpg (view on web) The smaller the font size, the blurrier it appears. examples2.jpg (view on web) — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[ReedYu]

I will give it a try. Thank you for your explanation.

[ReedYu]

The font blur issue has been resolved. How can I vertically center the text in drawText? It seems that the baseline is not at the center.I am using the height measured by measureText.

  canvas.drawText('Hello World!',0,font.getSize(),paint,font);

[wcandillon]

you should use the paragraph api for text layouts: https://shopify.github.io/react-native-skia/docs/text/paragraph/

[ReedYu]

My use case involves converting text into an image and then arranging it with other graphics, so I need to center the text within the image.

[wcandillon]

this exactly what this API does.