Skip to main content

​
Color

RGBA color represented as a tuple of four numbers. 
type Color = [number, number, number, number];
​
[0]
number
required
Red component (0-255)
​
[1]
number
required
Green component (0-255)
​
[2]
number
required
Blue component (0-255)
​
[3]
number
required
Alpha component (0-255)
const red: Color = [255, 0, 0, 255];
const semiTransparentBlue: Color = [0, 0, 255, 128];
const black: Color = [0, 0, 0, 255];

​
Point

Represents a 2D coordinate point. 
interface Point {
  x: number;
  y: number;
}
​
x
number
required
X-coordinate
​
y
number
required
Y-coordinate
const origin: Point = { x: 0, y: 0 };
const topRight: Point = { x: 100, y: 0 };

​
TransformProps

Base transformation properties for positioned elements. 
interface TransformProps {
  x?: number;
  y?: number;
  rotation?: number;
  scaleX?: number;
  scaleY?: number;
}
​
x
number
X-axis translation in pixels
​
y
number
Y-axis translation in pixels
​
rotation
number
Rotation angle in degrees
​
scaleX
number
default:"1"
Horizontal scale factor
​
scaleY
number
default:"1"
Vertical scale factor
import { Shape, Rect } from 'react-thorvg-fiber';

function TransformedShape() {
  return (
    <Shape
      x={100}
      y={50}
      rotation={45}
      scaleX={1.5}
      scaleY={1.5}
      fill={[255, 0, 0, 255]}
    >
      <Rect x={0} y={0} width={50} height={50} />
    </Shape>
  );
}

​
ShapeProps

Props for the Shape component. Shapes can contain geometry children (Rect, Circle, Path) to define their appearance. 
interface ShapeProps extends TransformProps {
  fill?: Color;
  stroke?: Color;
  strokeWidth?: number;
  strokeDash?: number[];
  strokeDashOffset?: number;
  strokeCap?: StrokeCapType;
  strokeJoin?: StrokeJoinType;
  strokeMiterlimit?: number;
  opacity?: number;
  fillRule?: FillRuleType;
}

​
Visual Properties

​
fill
Color
Fill color as RGBA tuple [R, G, B, A], each component 0-255
​
stroke
Color
Stroke color as RGBA tuple [R, G, B, A], each component 0-255
​
strokeWidth
number
Width of the stroke in pixels
​
opacity
number
default:"255"
Opacity value from 0 (transparent) to 255 (opaque)

​
Stroke Styling

​
strokeDash
number[]
Stroke dash pattern as an array of lengths
strokeDash={[5, 10]} // 5px dash, 10px gap
​
strokeDashOffset
number
Offset for stroke dash pattern in pixels
​
strokeCap
StrokeCapType
Cap style for stroke endpoints. See StrokeCap
​
strokeJoin
StrokeJoinType
Join style for stroke corners. See StrokeJoin
​
strokeMiterlimit
number
default:"4"
Miter limit for stroke joins

​
Fill Styling

​
fillRule
FillRuleType
Fill rule for determining shape interior. See FillRule

​
Transform Properties

Inherits all properties from TransformProps. 
import { Shape, Rect } from 'react-thorvg-fiber';

function StyledShape() {
  return (
    <Shape
      fill={[255, 0, 0, 255]}
      stroke={[0, 0, 0, 255]}
      strokeWidth={2}
    >
      <Rect x={0} y={0} width={100} height={100} />
    </Shape>
  );
}

​
RectProps

Props for the Rect component. Must be a child of a Shape component to be rendered. 
interface RectProps {
  x: number;
  y: number;
  width: number;
  height: number;
  rx?: number;
  ry?: number;
}
​
x
number
required
X-coordinate of the rectangle’s top-left corner
​
y
number
required
Y-coordinate of the rectangle’s top-left corner
​
width
number
required
Width of the rectangle in pixels
​
height
number
required
Height of the rectangle in pixels
​
rx
number
Horizontal corner radius for rounded rectangles
​
ry
number
Vertical corner radius for rounded rectangles
import { Shape, Rect } from 'react-thorvg-fiber';

function BasicRect() {
  return (
    <Shape fill={[100, 150, 200, 255]}>
      <Rect x={10} y={10} width={80} height={60} />
    </Shape>
  );
}

​
CircleProps

Props for the Circle component. Must be a child of a Shape component to be rendered. 
interface CircleProps {
  x: number;
  y: number;
  radius?: number;
  rx?: number;
  ry?: number;
}
​
x
number
required
X-coordinate of the circle’s center
​
y
number
required
Y-coordinate of the circle’s center
​
radius
number
Radius for a perfect circle
​
rx
number
Horizontal radius for an ellipse
​
ry
number
Vertical radius for an ellipse
Use either radius for a perfect circle, or rx and ry for an ellipse.
import { Shape, Circle } from 'react-thorvg-fiber';

function PerfectCircle() {
  return (
    <Shape fill={[0, 200, 100, 255]}>
      <Circle x={50} y={50} radius={30} />
    </Shape>
  );
}

​
PathProps

Props for the Path component. Must be a child of a Shape component to be rendered. 
interface PathProps {
  commands: PathCommandType[];
  points: Point[];
}
​
commands
PathCommandType[]
required
Array of path command types. Use PathCommand constants:
  • PathCommand.MoveTo - Move to a point
  • PathCommand.LineTo - Draw line to a point
  • PathCommand.CubicTo - Draw cubic bezier curve
  • PathCommand.Close - Close the path
See PathCommand
​
points
Point[]
required
Array of points corresponding to the commands. Each command consumes a different number of points:
  • MoveTo: 1 point (x, y)
  • LineTo: 1 point (x, y)
  • CubicTo: 3 points (control1, control2, end)
  • Close: 0 points
import { Shape, Path, PathCommand } from 'react-thorvg-fiber';

function Triangle() {
  return (
    <Shape fill={[255, 200, 0, 255]}>
      <Path
        commands={[
          PathCommand.MoveTo,
          PathCommand.LineTo,
          PathCommand.LineTo,
          PathCommand.Close,
        ]}
        points={[
          { x: 50, y: 10 },
          { x: 90, y: 80 },
          { x: 10, y: 80 },
        ]}
      />
    </Shape>
  );
}

​
SceneProps

Props for the Scene component. Scenes can contain multiple Shape children and other nested Scenes. 
interface SceneProps extends TransformProps {
  opacity?: number;
}
​
opacity
number
default:"255"
Opacity value from 0 (transparent) to 255 (opaque)

​
Transform Properties

Inherits all properties from TransformProps. 
import { Scene, Shape, Rect, Circle } from 'react-thorvg-fiber';

function GroupedShapes() {
  return (
    <Scene x={50} y={50} rotation={30}>
      <Shape fill={[255, 0, 0, 255]}>
        <Rect x={0} y={0} width={50} height={50} />
      </Shape>
      <Shape fill={[0, 0, 255, 255]}>
        <Circle x={60} y={25} radius={25} />
      </Shape>
    </Scene>
  );
}

​
SwCanvasProps

Props for the SwCanvas component (software-rendered canvas). 
type SwCanvasProps = ComponentPropsWithoutRef<'canvas'> & {
  width: number;
  height: number;
  devicePixelRatio?: number;
  locateFile?: (path: string, prefix: string) => string;
};
​
width
number
required
Width of the canvas in CSS pixels
​
height
number
required
Height of the canvas in CSS pixels
​
devicePixelRatio
number
default:"window.devicePixelRatio"
Device pixel ratio for high-DPI displays
​
locateFile
function
Optional function to customize the location of WebAssembly files. Useful for custom asset paths or CDN configurations.
(path: string, prefix: string) => string
SwCanvasProps also extends all standard HTML canvas element props (className, style, etc.)
import { SwCanvas, Shape, Rect } from 'react-thorvg-fiber';

function App() {
  return (
    <SwCanvas width={400} height={300}>
      <Shape fill={[100, 200, 255, 255]}>
        <Rect x={50} y={50} width={300} height={200} />
      </Shape>
    </SwCanvas>
  );
}

​
GlCanvasProps

Props for the GlCanvas component (WebGL-rendered canvas). 
type GlCanvasProps = ComponentPropsWithoutRef<'canvas'> & {
  id: string;
  width: number;
  height: number;
  devicePixelRatio?: number;
  locateFile?: (path: string, prefix: string) => string;
};
​
id
string
required
Required unique ID for the canvas element. Used by WebGL context to bind to the canvas.
​
width
number
required
Width of the canvas in CSS pixels
​
height
number
required
Height of the canvas in CSS pixels
​
devicePixelRatio
number
default:"window.devicePixelRatio"
Device pixel ratio for high-DPI displays
​
locateFile
function
Optional function to customize the location of WebAssembly files. Useful for custom asset paths or CDN configurations.
(path: string, prefix: string) => string
GlCanvasProps also extends all standard HTML canvas element props (className, style, etc.)
import { GlCanvas, Shape, Rect } from 'react-thorvg-fiber';

function App() {
  return (
    <GlCanvas id="my-canvas" width={400} height={300}>
      <Shape fill={[100, 200, 255, 255]}>
        <Rect x={50} y={50} width={300} height={200} />
      </Shape>
    </GlCanvas>
  );
}

Build docs developers (and LLMs) love

Get started for freeTalk to us