Examples using Canvas element

[Ridermansb]

I'm trying to generate a PDF for my current page. The idea is to create a canvas using html-to-image and somehow add it to the Canvas component so I can generate the PDF.

However, I'm not sure how to use the Canvas.

I'm using the Mantine CSS Framework.

Here’s what I have so far:

function TopHeaderView({ sinistro }: Readonly<{ sinistro: TSinistro }>) {
  const elementReference = useRef<HTMLDivElement>(null);
  const canvasReference = useRef<HTMLCanvasElement | null>(null);

  function handlePaint(painterObject: unknown) {
    console.log(painterObject, canvasReference.element);
    // WHAT TO DO HERE? 
    return null;
  }

  useEffect(() => {
    const element = elementReference.current;
    /**
     * Transform component into canvas
     * @param element - element to transform into canvas
     */
    async function transformCanvas(element: HTMLElement) {
      const canvas = await toCanvas(element);
      canvasReference.current = canvas;
    }

    if (element) {
      void transformCanvas(element);
    }
  }, []);

  return (
    <View fixed>
      <Canvas paint={handlePaint} />
      <Flex align="center" justify="space-between" gap={2} hidden ref={elementReference}>
        <Title order={3} mt="lg">
          Relatório de Perícia
        </Title>

        <Group align="center" gap={2}>
          <Paper withBorder px="xs">
            <Group gap={0}>
              <Badge variant="transparent">Placa</Badge>
              <Text fw={500}>{sinistro.placa}</Text>
            </Group>
          </Paper>
          <Paper withBorder px="xs">
            <Group gap={0}>
              <Badge variant="transparent">ID</Badge>
              <Text fw={500}>{sinistro.id}</Text>
            </Group>
          </Paper>
        </Group>
      </Flex>
    </View>
  );
}