Components

Canvas

The <Canvas> component provides a drawing surface where you can paint graphics using a Canvas-like API. It supports paths, shapes, strokes, fills, and gradients.

Props

Prop	Type	Default	Description
`style`	`Style`	—	Dimensions and position of the canvas.
`paint`*	`(painter: CanvasPainter) => void`	—	Callback that receives a painter object for drawing.
`fixed`	`boolean`	—	Repeat on every page.

Paint API

The painter object supports these methods:

Prop	Type	Default	Description
`moveTo(x, y)`	`void`	—	Move the current point without drawing.
`lineTo(x, y)`	`void`	—	Draw a line from the current point.
`quadraticCurveTo(cpx, cpy, x, y)`	`void`	—	Draw a quadratic Bezier curve.
`bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)`	`void`	—	Draw a cubic Bezier curve.
`arc(x, y, radius, startAngle, endAngle)`	`void`	—	Draw an arc.
`rect(x, y, w, h)`	`void`	—	Draw a rectangle path.
`circle(x, y, radius)`	`void`	—	Draw a circle path.
`ellipse(x, y, rx, ry)`	`void`	—	Draw an ellipse path.
`lineWidth`	`number`	—	Stroke width in points.
`strokeColor`	`string`	—	Stroke color (hex, rgb, name).
`fillColor`	`string`	—	Fill color (hex, rgb, name).
`strokeOpacity`	`number`	—	Stroke opacity (0-1).
`fillOpacity`	`number`	—	Fill opacity (0-1).
`dash`	`(length: number, options: { space: number }) => void`	—	Dash the stroke.
`undash`	`() => void`	—	Disable dash mode.
`clip`	`() => void`	—	Clip the drawing area.
`save`	`() => void`	—	Save the current graphics state.
`restore`	`() => void`	—	Restore the previously saved state.
`linearGradient(x1, y1, x2, y2)`	`Gradient`	—	Create a linear gradient.
`radialGradient(x1, y1, r1, x2, y2, r2)`	`Gradient`	—	Create a radial gradient.
`lineCap`	`string`	—	Line cap style ('butt', 'round', 'square').
`lineJoin`	`string`	—	Line join style ('miter', 'round', 'bevel').
`opacity`	`number`	—	Global opacity for all operations.

Usage

vue

<template>
  <Document>
    <Page size="A4">
      <Canvas
        :style="{ width: 200, height: 200 }"
        :paint="(p) => {
          // Draw a red rectangle
          p.fillColor = '#dc2626'
          p.rect(20, 20, 160, 80)
          p.fill()

          // Draw a circle with stroke
          p.fillColor = '#2563eb'
          p.strokeColor = '#1e3a5f'
          p.lineWidth = 3
          p.circle(100, 140, 40)
          p.fill()
          p.stroke()

          // Draw a line
          p.strokeColor = '#059669'
          p.lineWidth = 2
          p.moveTo(0, 0)
          p.lineTo(200, 200)
          p.stroke()
        }"
      />
    </Page>
  </Document>
</template>

Canvas With Gradient

vue

<template>
  <Document>
    <Page size="A4">
      <Canvas
        :style="{ width: 200, height: 100 }"
        :paint="(p) => {
          const grad = p.linearGradient(0, 0, 200, 0)
          grad.stop(0, '#dc2626')
          grad.stop(0.5, '#f97316')
          grad.stop(1, '#eab308')
          p.fillColor = grad
          p.rect(0, 0, 200, 100)
          p.fill()
        }"
      />
    </Page>
  </Document>
</template>