KineticJS: How can I prevent Image from overlapping the stroke?

Question

I have an image which is in a KineticJS layer. When I set a stroke with width > 1 the image will overlap the stroke at some points. Here is a JSFiddle I made:

This image shows the problem:

My Code:

var stage = new Kinetic.Stage({
    container: 'container',
    width: 800,
    height: 900
});
var layer = new Kinetic.Layer();

var imageObj = new Image();
imageObj.onload = function () {
    var kimage = new Kinetic.Image({
        x: 10,
        y: 10,
        image: imageObj
    });

    kimage.strokeEnabled(true);
    kimage.stroke("#1788a8");
    kimage.strokeWidth(11);

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

    // add the layer to the stage
    stage.add(layer);
};
imageObj.src = 'https://upload.wikimedia.org/wikipedia/commons/d/da/CatBlackHearts.png';

How can I prevent the image overlapping the stroke?

Answer 1

A canvas stroke is always drawn half-inside and half-outside its bounding box.

The bounding box is the image size.

Therefore your blue stroke is 11/2 = 6.5 pixels inside your image.

So to have your border fully outside the image, you must draw the border separately from the image.