CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-react-konva

React binding to canvas element via Konva framework providing declarative and reactive canvas graphics.

—

Pending
Overview
Eval results
Files

shapes.mddocs/

Shape Components

Complete set of 2D shape components for creating graphics. These components provide all the essential shapes for building complex canvas visualizations, from basic primitives to advanced custom shapes.

Capabilities

Basic Shapes

Rectangle Component

Rectangular shape component with configurable dimensions, positioning, and styling options.

/**
 * Rectangular shape component
 * Supports width, height, corner radius, and all standard styling options
 */
var Rect: KonvaNodeComponent<Konva.Rect, Konva.RectConfig>;

Usage Examples:

import React from 'react';
import { Stage, Layer, Rect } from 'react-konva';

// Basic rectangle
const BasicRect = () => (
  <Stage width={800} height={600}>
    <Layer>
      <Rect x={50} y={50} width={100} height={80} fill="red" />
    </Layer>
  </Stage>
);

// Rounded rectangle with stroke
const RoundedRect = () => (
  <Stage width={800} height={600}>
    <Layer>
      <Rect
        x={50}
        y={50}
        width={120}
        height={80}
        fill="blue"
        stroke="black"
        strokeWidth={2}
        cornerRadius={10}
      />
    </Layer>
  </Stage>
);

Circle Component

Circular shape component with configurable radius and center positioning.

/**
 * Circular shape component
 * Defined by center position and radius
 */
var Circle: KonvaNodeComponent<Konva.Circle, Konva.CircleConfig>;

Usage Examples:

import React from 'react';
import { Stage, Layer, Circle } from 'react-konva';

// Basic circle
const BasicCircle = () => (
  <Stage width={800} height={600}>
    <Layer>
      <Circle x={100} y={100} radius={50} fill="green" />
    </Layer>
  </Stage>
);

// Circle with gradient
const GradientCircle = () => (
  <Stage width={800} height={600}>
    <Layer>
      <Circle
        x={200}
        y={200}
        radius={60}
        fillRadialGradientStartPoint={{ x: 0, y: 0 }}
        fillRadialGradientStartRadius={0}
        fillRadialGradientEndPoint={{ x: 0, y: 0 }}
        fillRadialGradientEndRadius={60}
        fillRadialGradientColorStops={[0, 'red', 1, 'yellow']}
      />
    </Layer>
  </Stage>
);

Ellipse Component

Elliptical shape component with configurable horizontal and vertical radii.

/**
 * Elliptical shape component
 * Supports independent horizontal and vertical radii
 */
var Ellipse: KonvaNodeComponent<Konva.Ellipse, Konva.EllipseConfig>;

Usage Examples:

import React from 'react';
import { Stage, Layer, Ellipse } from 'react-konva';

// Basic ellipse
const BasicEllipse = () => (
  <Stage width={800} height={600}>
    <Layer>
      <Ellipse
        x={150}
        y={100}
        radiusX={80}
        radiusY={40}
        fill="purple"
      />
    </Layer>
  </Stage>
);

Geometric Shapes

Star Component

Multi-pointed star shape component with configurable number of points and radii.

/**
 * Multi-pointed star shape component
 * Configurable number of points, inner and outer radii
 */
var Star: KonvaNodeComponent<Konva.Star, Konva.StarConfig>;

Usage Examples:

import React from 'react';
import { Stage, Layer, Star } from 'react-konva';

// Five-pointed star
const FivePointStar = () => (
  <Stage width={800} height={600}>
    <Layer>
      <Star
        x={150}
        y={150}
        numPoints={5}
        innerRadius={30}
        outerRadius={60}
        fill="gold"
        stroke="orange"
        strokeWidth={2}
      />
    </Layer>
  </Stage>
);

Regular Polygon Component

Regular polygon shape component with configurable number of sides.

/**
 * Regular polygon shape component
 * Supports any number of sides with equal angles and side lengths
 */
var RegularPolygon: KonvaNodeComponent<Konva.RegularPolygon, Konva.RegularPolygonConfig>;

Usage Examples:

import React from 'react';
import { Stage, Layer, RegularPolygon } from 'react-konva';

// Hexagon
const Hexagon = () => (
  <Stage width={800} height={600}>
    <Layer>
      <RegularPolygon
        x={150}
        y={150}
        sides={6}
        radius={50}
        fill="cyan"
        stroke="blue"
        strokeWidth={2}
      />
    </Layer>
  </Stage>
);

Ring Component

Ring or donut shape component with inner and outer radius configuration.

/**
 * Ring or donut shape component
 * Defined by inner and outer radii
 */
var Ring: KonvaNodeComponent<Konva.Ring, Konva.RingConfig>;

Usage Examples:

import React from 'react';
import { Stage, Layer, Ring } from 'react-konva';

// Basic ring
const BasicRing = () => (
  <Stage width={800} height={600}>
    <Layer>
      <Ring
        x={150}
        y={150}
        innerRadius={30}
        outerRadius={60}
        fill="orange"
      />
    </Layer>
  </Stage>
);

Arc Component

Arc shape component for creating partial circles with configurable angles.

/**
 * Arc shape component for partial circles
 * Supports start angle, end angle, and clockwise direction
 */
var Arc: KonvaNodeComponent<Konva.Arc, Konva.ArcConfig>;

Usage Examples:

import React from 'react';
import { Stage, Layer, Arc } from 'react-konva';

// Quarter circle arc
const QuarterArc = () => (
  <Stage width={800} height={600}>
    <Layer>
      <Arc
        x={150}
        y={150}
        innerRadius={20}
        outerRadius={60}
        angle={90}
        fill="red"
      />
    </Layer>
  </Stage>
);

Wedge Component

Wedge or pie slice shape component for creating pie charts and sector shapes.

/**
 * Wedge or pie slice shape component
 * Perfect for pie charts and sector visualizations
 */
var Wedge: KonvaNodeComponent<Konva.Wedge, Konva.WedgeConfig>;

Usage Examples:

import React from 'react';
import { Stage, Layer, Wedge } from 'react-konva';

// Pie slice
const PieSlice = () => (
  <Stage width={800} height={600}>
    <Layer>
      <Wedge
        x={150}
        y={150}
        radius={60}
        angle={90}
        fill="green"
        stroke="darkgreen"
        strokeWidth={2}
      />
    </Layer>
  </Stage>
);

Line and Path Shapes

Line Component

Line and polyline shape component for creating paths, curves, and complex line-based shapes.

/**
 * Line and polyline shape component
 * Supports straight lines, curves, and complex paths with multiple points
 */
var Line: KonvaNodeComponent<Konva.Line, Konva.LineConfig>;

Usage Examples:

import React from 'react';
import { Stage, Layer, Line } from 'react-konva';

// Simple line
const SimpleLine = () => (
  <Stage width={800} height={600}>
    <Layer>
      <Line
        points={[50, 50, 200, 50]}
        stroke="black"
        strokeWidth={3}
      />
    </Layer>
  </Stage>
);

// Curved line (spline)
const CurvedLine = () => (
  <Stage width={800} height={600}>
    <Layer>
      <Line
        points={[50, 100, 100, 50, 150, 150, 200, 100]}
        stroke="blue"
        strokeWidth={2}
        tension={0.5}
      />
    </Layer>
  </Stage>
);

// Closed polygon
const ClosedPolygon = () => (
  <Stage width={800} height={600}>
    <Layer>
      <Line
        points={[100, 50, 150, 100, 50, 100]}
        stroke="red"
        strokeWidth={2}
        fill="pink"
        closed={true}
      />
    </Layer>
  </Stage>
);

Arrow Component

Arrow shape component with configurable points and styling for directional indicators.

/**
 * Arrow shape component
 * Supports multiple points with arrowhead styling
 */
var Arrow: KonvaNodeComponent<Konva.Arrow, Konva.ArrowConfig>;

Usage Examples:

import React from 'react';
import { Stage, Layer, Arrow } from 'react-konva';

// Simple arrow
const SimpleArrow = () => (
  <Stage width={800} height={600}>
    <Layer>
      <Arrow
        points={[50, 100, 200, 100]}
        pointerLength={20}
        pointerWidth={20}
        fill="black"
        stroke="black"
        strokeWidth={2}
      />
    </Layer>
  </Stage>
);

Path Component

SVG path shape component for complex shapes defined by SVG path data.

/**
 * SVG path shape component
 * Supports complex shapes defined by SVG path data strings
 */
var Path: KonvaNodeComponent<Konva.Path, Konva.PathConfig>;

Usage Examples:

import React from 'react';
import { Stage, Layer, Path } from 'react-konva';

// Heart shape using SVG path
const HeartShape = () => (
  <Stage width={800} height={600}>
    <Layer>
      <Path
        x={100}
        y={100}
        data="M12,21.35l-1.45-1.32C5.4,15.36,2,12.28,2,8.5 C2,5.42,4.42,3,7.5,3c1.74,0,3.41,0.81,4.5,2.09C13.09,3.81,14.76,3,16.5,3 C19.58,3,22,5.42,22,8.5c0,3.78-3.4,6.86-8.55,11.54L12,21.35z"
        fill="red"
        scaleX={3}
        scaleY={3}
      />
    </Layer>
  </Stage>
);

Text Rendering

Text Component

Text rendering component with configurable fonts, alignment, and styling options.

/**
 * Text rendering component
 * Supports fonts, alignment, wrapping, and text styling
 */
var Text: KonvaNodeComponent<Konva.Text, Konva.TextConfig>;

Usage Examples:

import React from 'react';
import { Stage, Layer, Text } from 'react-konva';

// Simple text
const SimpleText = () => (
  <Stage width={800} height={600}>
    <Layer>
      <Text
        x={50}
        y={50}
        text="Hello World!"
        fontSize={24}
        fontFamily="Arial"
        fill="black"
      />
    </Layer>
  </Stage>
);

// Styled text with wrapping
const StyledText = () => (
  <Stage width={800} height={600}>
    <Layer>
      <Text
        x={50}
        y={100}
        text="This is a longer text that will wrap to multiple lines within the specified width."
        fontSize={16}
        fontFamily="Georgia"
        fill="darkblue"
        width={200}
        padding={10}
        align="center"
      />
    </Layer>
  </Stage>
);

TextPath Component

Text along path shape component for rendering text that follows a curved or complex path.

/**
 * Text along path shape component
 * Renders text that follows the shape of a path
 */
var TextPath: KonvaNodeComponent<Konva.TextPath, Konva.TextPathConfig>;

Usage Examples:

import React from 'react';
import { Stage, Layer, TextPath } from 'react-konva';

// Text along circular path
const CircularText = () => (
  <Stage width={800} height={600}>
    <Layer>
      <TextPath
        x={200}
        y={200}
        fill="blue"
        fontSize={16}
        fontFamily="Arial"
        text="Text following a circular path • "
        data="M 0,0 A 100,100 0 1,1 0,1 z"
      />
    </Layer>
  </Stage>
);

Media and Special Shapes

Image Component

Image shape component for displaying bitmap images on the canvas.

/**
 * Image shape component for displaying bitmap images
 * Supports scaling, cropping, and image transformations
 */
var Image: KonvaNodeComponent<Konva.Image, Konva.ImageConfig>;

Usage Examples:

import React from 'react';
import { Stage, Layer, Image } from 'react-konva';
import useImage from 'use-image';

// Image with loading
const ImageComponent = () => {
  const [image] = useImage('https://example.com/image.jpg');

  return (
    <Stage width={800} height={600}>
      <Layer>
        <Image
          x={50}
          y={50}
          image={image}
          width={200}
          height={150}
        />
      </Layer>
    </Stage>
  );
};

Sprite Component

Animated sprite component for frame-based animations using sprite sheets.

/**
 * Animated sprite component for frame-based animations
 * Uses sprite sheets for efficient animation rendering
 */
var Sprite: KonvaNodeComponent<Konva.Sprite, Konva.SpriteConfig>;

Usage Examples:

import React from 'react';
import { Stage, Layer, Sprite } from 'react-konva';
import useImage from 'use-image';

// Animated sprite
const AnimatedSprite = () => {
  const [spriteImage] = useImage('/sprite-sheet.png');

  return (
    <Stage width={800} height={600}>
      <Layer>
        <Sprite
          x={100}
          y={100}
          image={spriteImage}
          animation="idle"
          animations={{
            idle: [0, 0, 64, 64, 1, 0, 64, 64, 2, 0, 64, 64],
            walk: [0, 64, 64, 64, 1, 64, 64, 64, 2, 64, 64, 64]
          }}
          frameRate={8}
          frameIndex={0}
        />
      </Layer>
    </Stage>
  );
};

Special UI Shapes

Tag Component

Tag shape component for creating speech bubbles and callout shapes, typically used with Label components.

/**
 * Tag shape component for speech bubbles and callouts
 * Commonly used within Label components for annotations
 */
var Tag: KonvaNodeComponent<Konva.Tag, Konva.TagConfig>;

Usage Examples:

import React from 'react';
import { Stage, Layer, Label, Tag, Text } from 'react-konva';

// Speech bubble tag
const SpeechBubble = () => (
  <Stage width={800} height={600}>
    <Layer>
      <Label x={100} y={100}>
        <Tag
          fill="white"
          stroke="black"
          strokeWidth={1}
          pointerDirection="down"
          pointerWidth={20}
          pointerHeight={20}
          cornerRadius={5}
        />
        <Text
          text="Hello World!"
          fontSize={16}
          padding={8}
          fill="black"
        />
      </Label>
    </Layer>
  </Stage>
);

Custom Shape Component

Custom shape component for creating complex shapes using canvas drawing context.

/**
 * Custom shape component for complex shapes using canvas context
 * Provides direct access to canvas 2D drawing context for custom rendering
 */
var Shape: KonvaNodeComponent<Konva.Shape, Konva.ShapeConfig>;

interface ShapeConfig extends Konva.NodeConfig {
  sceneFunc: (context: any, shape: any) => void;
  hitFunc?: (context: any, shape: any) => void;
}

Usage Examples:

import React from 'react';
import { Stage, Layer, Shape } from 'react-konva';

// Custom diamond shape
const DiamondShape = () => (
  <Stage width={800} height={600}>
    <Layer>
      <Shape
        x={150}
        y={150}
        sceneFunc={(context, shape) => {
          context.beginPath();
          context.moveTo(0, -50);
          context.lineTo(50, 0);
          context.lineTo(0, 50);
          context.lineTo(-50, 0);
          context.closePath();
          context.fillStrokeShape(shape);
        }}
        fill="purple"
        stroke="darkpurple"
        strokeWidth={2}
      />
    </Layer>
  </Stage>
);

Install with Tessl CLI

npx tessl i tessl/npm-react-konva

docs

core-components.md

index.md

interactions.md

shapes.md

utilities.md

tile.json