شروع کار با konvajs :

آدرس سایت سازنده : https://konvajs.org/
برای شروع ابتدا konvajs دانلود کنید یا بوسیله CDN های خود سایت درون فایل Html آن را وارد کنید به این صورت :

CDN :
<script src="https://unpkg.com/konva@7.0.3/konva.min.js"></script>

بصورت دستی
<script src="myfolder/konva.js"></script>

خوب حالا به سبک طبقاتی کنوا دقت کنید

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

در طبقه اول  stage وجود دارد stage در واقع  اصلی ترین زمینه برای انجام کار ها است و هر چیزی درون stage  ایجاد می شود

پس در هر صورت شما باید برای هر کاری یک stage  ایجاد کنید

خوب حالا یک stage ایجاد می کنیم

// first we need to create a stage
var stage = new Konva.Stage({
  container: 'container',   // id of container 
  width: 500,
  height: 500
});

در مرحله بعد یک لایه (layer) می سازیم

var layer = new Konva.Layer();

حالا یک شکل (shape) ایجاد میکنیم

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

و شکل رو به لایه اضافه می کنیم

layer.add(circle);

و در مرحله بعد لایه رو به استیج اضافه میکنیم

stage.add(layer);

حالا استیج رو باز بینی می کنیم

layer.draw();

کل کد ها در یک نگاه :

// first we need to create a stage
var stage = new Konva.Stage({
  container: 'container',   // id of container 

  width: 500,
  height: 500
});

// then create layer
var layer = new Konva.Layer();

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

// add the shape to the layer
layer.add(circle);

// add the layer to the stage
stage.add(layer);

// draw the image
layer.draw();