Canvas

A React component for freely drawing any content on the page.

import { Canvas } from '@react-pdf/renderer';

const Bar = () => (
  <Canvas
    style={{ width: 200, height: 40 }}
    paint={(painter, availableWidth, availableHeight) =>
      painter.rect(0, 0, availableWidth * 0.6, availableHeight).fill('tomato')
    }
  />
);

Valid props

React-pdf does not check how much space your drawing takes, so make sure you always define a width and height on the style prop.

Painter function

Prop used to perform drawings inside the Canvas. It takes 3 arguments:

• Painter object: Wrapper around pdfkit drawing methods. Use this to draw inside the Canvas
• availableWidth: Width of the Canvas element.
• availableHeight: Height of the Canvas element.

Painter object

Wrapper around pdfkit methods you can use to draw inside the Canvas. All operations are chainable. For more information about how these methods work, please refer to pdfkit documentation.