Konva.js dotted stroke around Img element with text

Question

I'm new to Konva.js lib, I implemented drag and drop of the img inside the canvas element, I would like to point user that the img is draggable so I would like to do something like this ->

Any Ideas how to do this inside Konva.js ? Thanks!

Answer 1

You can use stroke with the combination of dash property to make a dotted stroke

Konva.Image.fromURL('https://i.imgur.com/ktWThtZ.png', img => {
  img.setAttrs({
    x: 50,
    y: 50,
    scaleX: 0.5,
    scaleY: 0.5,
    stroke: 'red',
    strokeWidth: 10,
    dash: [10, 10],
    draggable: true
  });
  layer.add(img);
  layer.draw();
});

Demo: https://jsbin.com/xoporixura/1/edit?html,js,output

If you need padding for the stroke you can add a rectangle on top of the image with the bigger size.