Search code examples
canvaskineticjsstroke

KineticJs one image with multi stroke

I know how to apply a stroke in one image.

Is it possible use multi-stroke in one image?

Maybe like this results. enter image description here

Or how could I do it.

Solution

  • The simplest way is just draw several Kinetic.Rect nodes on top of your image with required stroke AND transparent background (you can skip fill property or set it to rgba(0,0,0,0)).

    var rect = new Kinetic.Rect({
  x: 0, y: 0,
  width: 100, height: 50,
  stroke: 'red'
})