0
# Shape Components
1

2
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.
3

4
## Capabilities
5

6
### Basic Shapes
7

8
#### Rectangle Component
9

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

12
```typescript { .api }
13
/**
14
 * Rectangular shape component
15
 * Supports width, height, corner radius, and all standard styling options
16
 */
17
var Rect: KonvaNodeComponent<Konva.Rect, Konva.RectConfig>;
18
```
19

20
**Usage Examples:**
21

22
```typescript
23
import React from 'react';
24
import { Stage, Layer, Rect } from 'react-konva';
25

26
// Basic rectangle
27
const BasicRect = () => (
28
  <Stage width={800} height={600}>
29
    <Layer>
30
      <Rect x={50} y={50} width={100} height={80} fill="red" />
31
    </Layer>
32
  </Stage>
33
);
34

35
// Rounded rectangle with stroke
36
const RoundedRect = () => (
37
  <Stage width={800} height={600}>
38
    <Layer>
39
      <Rect
40
        x={50}
41
        y={50}
42
        width={120}
43
        height={80}
44
        fill="blue"
45
        stroke="black"
46
        strokeWidth={2}
47
        cornerRadius={10}
48
      />
49
    </Layer>
50
  </Stage>
51
);
52
```
53

54
#### Circle Component
55

56
Circular shape component with configurable radius and center positioning.
57

58
```typescript { .api }
59
/**
60
 * Circular shape component
61
 * Defined by center position and radius
62
 */
63
var Circle: KonvaNodeComponent<Konva.Circle, Konva.CircleConfig>;
64
```
65

66
**Usage Examples:**
67

68
```typescript
69
import React from 'react';
70
import { Stage, Layer, Circle } from 'react-konva';
71

72
// Basic circle
73
const BasicCircle = () => (
74
  <Stage width={800} height={600}>
75
    <Layer>
76
      <Circle x={100} y={100} radius={50} fill="green" />
77
    </Layer>
78
  </Stage>
79
);
80

81
// Circle with gradient
82
const GradientCircle = () => (
83
  <Stage width={800} height={600}>
84
    <Layer>
85
      <Circle
86
        x={200}
87
        y={200}
88
        radius={60}
89
        fillRadialGradientStartPoint={{ x: 0, y: 0 }}
90
        fillRadialGradientStartRadius={0}
91
        fillRadialGradientEndPoint={{ x: 0, y: 0 }}
92
        fillRadialGradientEndRadius={60}
93
        fillRadialGradientColorStops={[0, 'red', 1, 'yellow']}
94
      />
95
    </Layer>
96
  </Stage>
97
);
98
```
99

100
#### Ellipse Component
101

102
Elliptical shape component with configurable horizontal and vertical radii.
103

104
```typescript { .api }
105
/**
106
 * Elliptical shape component
107
 * Supports independent horizontal and vertical radii
108
 */
109
var Ellipse: KonvaNodeComponent<Konva.Ellipse, Konva.EllipseConfig>;
110
```
111

112
**Usage Examples:**
113

114
```typescript
115
import React from 'react';
116
import { Stage, Layer, Ellipse } from 'react-konva';
117

118
// Basic ellipse
119
const BasicEllipse = () => (
120
  <Stage width={800} height={600}>
121
    <Layer>
122
      <Ellipse
123
        x={150}
124
        y={100}
125
        radiusX={80}
126
        radiusY={40}
127
        fill="purple"
128
      />
129
    </Layer>
130
  </Stage>
131
);
132
```
133

134
### Geometric Shapes
135

136
#### Star Component
137

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

140
```typescript { .api }
141
/**
142
 * Multi-pointed star shape component
143
 * Configurable number of points, inner and outer radii
144
 */
145
var Star: KonvaNodeComponent<Konva.Star, Konva.StarConfig>;
146
```
147

148
**Usage Examples:**
149

150
```typescript
151
import React from 'react';
152
import { Stage, Layer, Star } from 'react-konva';
153

154
// Five-pointed star
155
const FivePointStar = () => (
156
  <Stage width={800} height={600}>
157
    <Layer>
158
      <Star
159
        x={150}
160
        y={150}
161
        numPoints={5}
162
        innerRadius={30}
163
        outerRadius={60}
164
        fill="gold"
165
        stroke="orange"
166
        strokeWidth={2}
167
      />
168
    </Layer>
169
  </Stage>
170
);
171
```
172

173
#### Regular Polygon Component
174

175
Regular polygon shape component with configurable number of sides.
176

177
```typescript { .api }
178
/**
179
 * Regular polygon shape component
180
 * Supports any number of sides with equal angles and side lengths
181
 */
182
var RegularPolygon: KonvaNodeComponent<Konva.RegularPolygon, Konva.RegularPolygonConfig>;
183
```
184

185
**Usage Examples:**
186

187
```typescript
188
import React from 'react';
189
import { Stage, Layer, RegularPolygon } from 'react-konva';
190

191
// Hexagon
192
const Hexagon = () => (
193
  <Stage width={800} height={600}>
194
    <Layer>
195
      <RegularPolygon
196
        x={150}
197
        y={150}
198
        sides={6}
199
        radius={50}
200
        fill="cyan"
201
        stroke="blue"
202
        strokeWidth={2}
203
      />
204
    </Layer>
205
  </Stage>
206
);
207
```
208

209
#### Ring Component
210

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

213
```typescript { .api }
214
/**
215
 * Ring or donut shape component
216
 * Defined by inner and outer radii
217
 */
218
var Ring: KonvaNodeComponent<Konva.Ring, Konva.RingConfig>;
219
```
220

221
**Usage Examples:**
222

223
```typescript
224
import React from 'react';
225
import { Stage, Layer, Ring } from 'react-konva';
226

227
// Basic ring
228
const BasicRing = () => (
229
  <Stage width={800} height={600}>
230
    <Layer>
231
      <Ring
232
        x={150}
233
        y={150}
234
        innerRadius={30}
235
        outerRadius={60}
236
        fill="orange"
237
      />
238
    </Layer>
239
  </Stage>
240
);
241
```
242

243
#### Arc Component
244

245
Arc shape component for creating partial circles with configurable angles.
246

247
```typescript { .api }
248
/**
249
 * Arc shape component for partial circles
250
 * Supports start angle, end angle, and clockwise direction
251
 */
252
var Arc: KonvaNodeComponent<Konva.Arc, Konva.ArcConfig>;
253
```
254

255
**Usage Examples:**
256

257
```typescript
258
import React from 'react';
259
import { Stage, Layer, Arc } from 'react-konva';
260

261
// Quarter circle arc
262
const QuarterArc = () => (
263
  <Stage width={800} height={600}>
264
    <Layer>
265
      <Arc
266
        x={150}
267
        y={150}
268
        innerRadius={20}
269
        outerRadius={60}
270
        angle={90}
271
        fill="red"
272
      />
273
    </Layer>
274
  </Stage>
275
);
276
```
277

278
#### Wedge Component
279

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

282
```typescript { .api }
283
/**
284
 * Wedge or pie slice shape component
285
 * Perfect for pie charts and sector visualizations
286
 */
287
var Wedge: KonvaNodeComponent<Konva.Wedge, Konva.WedgeConfig>;
288
```
289

290
**Usage Examples:**
291

292
```typescript
293
import React from 'react';
294
import { Stage, Layer, Wedge } from 'react-konva';
295

296
// Pie slice
297
const PieSlice = () => (
298
  <Stage width={800} height={600}>
299
    <Layer>
300
      <Wedge
301
        x={150}
302
        y={150}
303
        radius={60}
304
        angle={90}
305
        fill="green"
306
        stroke="darkgreen"
307
        strokeWidth={2}
308
      />
309
    </Layer>
310
  </Stage>
311
);
312
```
313

314
### Line and Path Shapes
315

316
#### Line Component
317

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

320
```typescript { .api }
321
/**
322
 * Line and polyline shape component
323
 * Supports straight lines, curves, and complex paths with multiple points
324
 */
325
var Line: KonvaNodeComponent<Konva.Line, Konva.LineConfig>;
326
```
327

328
**Usage Examples:**
329

330
```typescript
331
import React from 'react';
332
import { Stage, Layer, Line } from 'react-konva';
333

334
// Simple line
335
const SimpleLine = () => (
336
  <Stage width={800} height={600}>
337
    <Layer>
338
      <Line
339
        points={[50, 50, 200, 50]}
340
        stroke="black"
341
        strokeWidth={3}
342
      />
343
    </Layer>
344
  </Stage>
345
);
346

347
// Curved line (spline)
348
const CurvedLine = () => (
349
  <Stage width={800} height={600}>
350
    <Layer>
351
      <Line
352
        points={[50, 100, 100, 50, 150, 150, 200, 100]}
353
        stroke="blue"
354
        strokeWidth={2}
355
        tension={0.5}
356
      />
357
    </Layer>
358
  </Stage>
359
);
360

361
// Closed polygon
362
const ClosedPolygon = () => (
363
  <Stage width={800} height={600}>
364
    <Layer>
365
      <Line
366
        points={[100, 50, 150, 100, 50, 100]}
367
        stroke="red"
368
        strokeWidth={2}
369
        fill="pink"
370
        closed={true}
371
      />
372
    </Layer>
373
  </Stage>
374
);
375
```
376

377
#### Arrow Component
378

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

381
```typescript { .api }
382
/**
383
 * Arrow shape component
384
 * Supports multiple points with arrowhead styling
385
 */
386
var Arrow: KonvaNodeComponent<Konva.Arrow, Konva.ArrowConfig>;
387
```
388

389
**Usage Examples:**
390

391
```typescript
392
import React from 'react';
393
import { Stage, Layer, Arrow } from 'react-konva';
394

395
// Simple arrow
396
const SimpleArrow = () => (
397
  <Stage width={800} height={600}>
398
    <Layer>
399
      <Arrow
400
        points={[50, 100, 200, 100]}
401
        pointerLength={20}
402
        pointerWidth={20}
403
        fill="black"
404
        stroke="black"
405
        strokeWidth={2}
406
      />
407
    </Layer>
408
  </Stage>
409
);
410
```
411

412
#### Path Component
413

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

416
```typescript { .api }
417
/**
418
 * SVG path shape component
419
 * Supports complex shapes defined by SVG path data strings
420
 */
421
var Path: KonvaNodeComponent<Konva.Path, Konva.PathConfig>;
422
```
423

424
**Usage Examples:**
425

426
```typescript
427
import React from 'react';
428
import { Stage, Layer, Path } from 'react-konva';
429

430
// Heart shape using SVG path
431
const HeartShape = () => (
432
  <Stage width={800} height={600}>
433
    <Layer>
434
      <Path
435
        x={100}
436
        y={100}
437
        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"
438
        fill="red"
439
        scaleX={3}
440
        scaleY={3}
441
      />
442
    </Layer>
443
  </Stage>
444
);
445
```
446

447
### Text Rendering
448

449
#### Text Component
450

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

453
```typescript { .api }
454
/**
455
 * Text rendering component
456
 * Supports fonts, alignment, wrapping, and text styling
457
 */
458
var Text: KonvaNodeComponent<Konva.Text, Konva.TextConfig>;
459
```
460

461
**Usage Examples:**
462

463
```typescript
464
import React from 'react';
465
import { Stage, Layer, Text } from 'react-konva';
466

467
// Simple text
468
const SimpleText = () => (
469
  <Stage width={800} height={600}>
470
    <Layer>
471
      <Text
472
        x={50}
473
        y={50}
474
        text="Hello World!"
475
        fontSize={24}
476
        fontFamily="Arial"
477
        fill="black"
478
      />
479
    </Layer>
480
  </Stage>
481
);
482

483
// Styled text with wrapping
484
const StyledText = () => (
485
  <Stage width={800} height={600}>
486
    <Layer>
487
      <Text
488
        x={50}
489
        y={100}
490
        text="This is a longer text that will wrap to multiple lines within the specified width."
491
        fontSize={16}
492
        fontFamily="Georgia"
493
        fill="darkblue"
494
        width={200}
495
        padding={10}
496
        align="center"
497
      />
498
    </Layer>
499
  </Stage>
500
);
501
```
502

503
#### TextPath Component
504

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

507
```typescript { .api }
508
/**
509
 * Text along path shape component
510
 * Renders text that follows the shape of a path
511
 */
512
var TextPath: KonvaNodeComponent<Konva.TextPath, Konva.TextPathConfig>;
513
```
514

515
**Usage Examples:**
516

517
```typescript
518
import React from 'react';
519
import { Stage, Layer, TextPath } from 'react-konva';
520

521
// Text along circular path
522
const CircularText = () => (
523
  <Stage width={800} height={600}>
524
    <Layer>
525
      <TextPath
526
        x={200}
527
        y={200}
528
        fill="blue"
529
        fontSize={16}
530
        fontFamily="Arial"
531
        text="Text following a circular path • "
532
        data="M 0,0 A 100,100 0 1,1 0,1 z"
533
      />
534
    </Layer>
535
  </Stage>
536
);
537
```
538

539
### Media and Special Shapes
540

541
#### Image Component
542

543
Image shape component for displaying bitmap images on the canvas.
544

545
```typescript { .api }
546
/**
547
 * Image shape component for displaying bitmap images
548
 * Supports scaling, cropping, and image transformations
549
 */
550
var Image: KonvaNodeComponent<Konva.Image, Konva.ImageConfig>;
551
```
552

553
**Usage Examples:**
554

555
```typescript
556
import React from 'react';
557
import { Stage, Layer, Image } from 'react-konva';
558
import useImage from 'use-image';
559

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

564
  return (
565
    <Stage width={800} height={600}>
566
      <Layer>
567
        <Image
568
          x={50}
569
          y={50}
570
          image={image}
571
          width={200}
572
          height={150}
573
        />
574
      </Layer>
575
    </Stage>
576
  );
577
};
578
```
579

580
#### Sprite Component
581

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

584
```typescript { .api }
585
/**
586
 * Animated sprite component for frame-based animations
587
 * Uses sprite sheets for efficient animation rendering
588
 */
589
var Sprite: KonvaNodeComponent<Konva.Sprite, Konva.SpriteConfig>;
590
```
591

592
**Usage Examples:**
593

594
```typescript
595
import React from 'react';
596
import { Stage, Layer, Sprite } from 'react-konva';
597
import useImage from 'use-image';
598

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

603
  return (
604
    <Stage width={800} height={600}>
605
      <Layer>
606
        <Sprite
607
          x={100}
608
          y={100}
609
          image={spriteImage}
610
          animation="idle"
611
          animations={{
612
            idle: [0, 0, 64, 64, 1, 0, 64, 64, 2, 0, 64, 64],
613
            walk: [0, 64, 64, 64, 1, 64, 64, 64, 2, 64, 64, 64]
614
          }}
615
          frameRate={8}
616
          frameIndex={0}
617
        />
618
      </Layer>
619
    </Stage>
620
  );
621
};
622
```
623

624
### Special UI Shapes
625

626
#### Tag Component
627

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

630
```typescript { .api }
631
/**
632
 * Tag shape component for speech bubbles and callouts
633
 * Commonly used within Label components for annotations
634
 */
635
var Tag: KonvaNodeComponent<Konva.Tag, Konva.TagConfig>;
636
```
637

638
**Usage Examples:**
639

640
```typescript
641
import React from 'react';
642
import { Stage, Layer, Label, Tag, Text } from 'react-konva';
643

644
// Speech bubble tag
645
const SpeechBubble = () => (
646
  <Stage width={800} height={600}>
647
    <Layer>
648
      <Label x={100} y={100}>
649
        <Tag
650
          fill="white"
651
          stroke="black"
652
          strokeWidth={1}
653
          pointerDirection="down"
654
          pointerWidth={20}
655
          pointerHeight={20}
656
          cornerRadius={5}
657
        />
658
        <Text
659
          text="Hello World!"
660
          fontSize={16}
661
          padding={8}
662
          fill="black"
663
        />
664
      </Label>
665
    </Layer>
666
  </Stage>
667
);
668
```
669

670
### Custom Shape Component
671

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

674
```typescript { .api }
675
/**
676
 * Custom shape component for complex shapes using canvas context
677
 * Provides direct access to canvas 2D drawing context for custom rendering
678
 */
679
var Shape: KonvaNodeComponent<Konva.Shape, Konva.ShapeConfig>;
680

681
interface ShapeConfig extends Konva.NodeConfig {
682
  sceneFunc: (context: any, shape: any) => void;
683
  hitFunc?: (context: any, shape: any) => void;
684
}
685
```
686

687
**Usage Examples:**
688

689
```typescript
690
import React from 'react';
691
import { Stage, Layer, Shape } from 'react-konva';
692

693
// Custom diamond shape
694
const DiamondShape = () => (
695
  <Stage width={800} height={600}>
696
    <Layer>
697
      <Shape
698
        x={150}
699
        y={150}
700
        sceneFunc={(context, shape) => {
701
          context.beginPath();
702
          context.moveTo(0, -50);
703
          context.lineTo(50, 0);
704
          context.lineTo(0, 50);
705
          context.lineTo(-50, 0);
706
          context.closePath();
707
          context.fillStrokeShape(shape);
708
        }}
709
        fill="purple"
710
        stroke="darkpurple"
711
        strokeWidth={2}
712
      />
713
    </Layer>
714
  </Stage>
715
);
716
```