drawing complex stroke (border) in KineticJS

Question

I have an KineticJS Image.

I want to draw a border around this image.

To do that, I am using stroke.

var x = new Kinetic.Image({
    image: img,
    stroke: 'Red',
    strokeWidth: 5
}

• 1- Could I have this border with rounded corners? Like here jsbin
• 2- Could I give to this border transparency that gradually increases from interior to exterior (Let say, from opacity=0.9 to opacity=0.3, with linear decrease)

Can I achieve these with stroke or do I need drawing line etc. and create group with the image?

Answer 1

1) you can draw transparent Kinetic.Rect with stroke and rounded corner with your image.

    var rect = new Kinetic.Rect({
       x : image.x(),
       y : image.y(),
       width :image.width(),
       height : image.height(),
       stroke : 'blue',
       storkeWidth : 5,
       cornerRadius : 10
    });

Demo

2) There is no easy way to do this. Only if you wil draw stroke manually with Kinetic.Line objects.