Canvas

Import them from @inkoxide/render. Examples, and how these components work together, are in the guide.

Imperative drawing with a painter (paint={(p, w, h) => p.circle(w / 2, h / 2, 20).fill('red')}).

import { Canvas, Document, Page, View } from '@inkoxide/render';

export default function Example() {
  return (
    <Document>
      <Page size={[320, 140]}>
        <View className="flex-1 items-center justify-center">
          <Canvas
            width={160}
            height={80}
            paint={(p, w, h) => {
              const sky = p.linearGradient(0, 0, 0, h).stop(0, '#f6c79a').stop(1, '#c4471b');
              p.save().roundedRect(0, 0, w, h, 8).clip();
              p.rect(0, 0, w, h).fill(sky);
              p.restore().circle(w / 2, h / 2, 16).fill('#fff4e2');
            }}
          />
        </View>
      </Page>
    </Document>
  );
}

Prop	Type	Description
`paint` (required)	`(painter: import('../canvas.ts').Painter, width: number, height: number) => void`	Draws with a pdfkit-style painter; `width` and `height` are the canvas size in points.
`break`	`BreakProp`
`fixed`	`boolean`	Repeats the drawing on every page, like `fixed` on a `View`.
`pages`	`PageFilter`
`href`	`string`
`className`	`string`	Box utilities for the image the drawing becomes (margins, position, `pages`…).
`style`	`Style`
`debug`	`boolean`	Outlines the drawing's box.
`width` (required)	`Length`	Width and height of the drawing in the layout (points or units); also the SVG viewport.
`height` (required)	`Length`