CODEWITHSUNDEEP
javascriptcanvaskineticjs
oooyaya
oooyaya

Reputation: 1783

KineticJS strokeWidth centering

When you use strokeWidth in Kinetic, it adds width on each side of the actual point. So, in other words the stroke is centered on the normally 1px line and the width of that line grows outward from the center.

So for example in the below image "A", you see that the point is at (0,0) but the line is growing outward from that point. What I need is something like image "B".

I know I can accomplish this by just enlarging the polygon by the difference of the strokeWidth, but that will throw off many measurements and I'm hoping there's something easier to say "grow outward."

enter image description here

enter image description here

Upvotes: 2

Views: 239

Answers (1)

markE
markE

Reputation: 105015

Center-aligned is the only native html canvas stroke alignment.

It is occasionally proposed that strokes be given "in" | "out" | "center" alignments, but so far nothing from whatWG: http://old.nabble.com/Canvas-stroke-alignment-tc29205720.html

You could put your polygon in a custom Kinetic Shape. That way you could draw a second "stroking" polygon that is outside the original polygon. It's a bit more setup work, but you could achieve your desired result.

Upvotes: 1

Related Questions