react-konvaの公式ドキュメントを要約しました

react konvaとは

和訳しただけです↓
konvaはデスクトップおよびモバイル アプリケーションのキャンバスの対話性を可能にすることで2D コンテキストを拡張する HTML5 Canvas JavaScript フレームワークです。

Konvaデスクトップおよびモバイル アプリケーションの高性能アニメーション、トランジション、ノード ネスト、階層化、フィルタリング、キャッシュ、イベント処理などが可能になります。

アプリケーションで数千のシェイプを使用している場合でも、ステージ上にオブジェクトを描画したり、イベント リスナーを追加したり、
他のシェイプとは独立して移動、拡大縮小、回転したりすることができ、高性能
アニメーションをサポートできます。

このプロジェクトは、 KineticJSの GitHub フォークとして始まりました。
参考: https://konvajs.org/docs/overview.html

レイヤー

<Stage>、<Layer>、<Group>、RectやTextなど後述する<Shape>から成り立ちます。
Layerが6つあるとコンソールでwarningが出るのでGroupをうまく使って階層分けしましょう。

              Stage
                |
         +------+------+
         |             |
       Layer         Layer
         |             |
   +-----+-----+     Shape
   |           |
 Group       Group
   |           |
   +       +---+---+
   |       |       |
Shape   Group    Shape
           |
           +
           |
         Shape

参考: https://konvajs.org/docs/overview.html

Shapeの一覧

形状は全部でこれだけあって、今回は太字のものだけ詳細書きます。
他の形状の詳細気になればこちらへ→　https://konvajs.org/docs/

長方形
丸
楕円
ウェッジ
ライン - シンプルライン
線 - 多角形
ライン - スプライン
ライン - ブロブ
スプライト
画像
文章
テキストパス
星
指輪
アーク
ラベル
パス
正多角形
矢印
カスタム

長方形 Rect

var rect1 = new Konva.Rect({
        x: 20,
        y: 20,
        width: 100,
        height: 50,
        fill: 'green',
        stroke: 'black',
        strokeWidth: 4,
      });

api参考: https://konvajs.org/api/Konva.Rect.html

丸 Circle

var circle = new Konva.Circle({
        x: stage.width() / 2,
        y: stage.height() / 2,
        radius: 70,
        fill: 'red',
        stroke: 'black',
        strokeWidth: 4,
      });

api参考: https://konvajs.org/api/Konva.Circle.html

ライン - シンプルライン Line

var redLine = new Konva.Line({
        points: [5, 70, 140, 23, 250, 60, 300, 20],
        stroke: 'red',
        strokeWidth: 15,
        lineCap: 'round',
        lineJoin: 'round',
      });

api参考: https://konvajs.org/api/Konva.Line.html

文章 - Text

var simpleText = new Konva.Text({
        x: stage.width() / 2,
        y: 15,
        text: 'Simple Text',
        fontSize: 30,
        fontFamily: 'Calibri',
        fill: 'green',
      });

api参考: https://konvajs.org/api/Konva.Text.html

以上です。また詰まったこととかあれば記事にしようと思います。