CODEWITHSUNDEEP
javascripthtmlcanvaspaperjs
neph
neph

Reputation: 151

Is there a paper.js option to draw a path stroke under the fill?

I'm moving from vanilla <canvas> to using the paper.js library and I can't seem to duplicate this behavior.

Is there any way besides making two separate paths for the stroke and fill?

As a really quick example: any path will have the stroke draw above the fill. 

let p = new Path.Circle(new Point(0, 0), 1);
    p.strokeColor = '#FF0000';
    p.fillColor = '#00FF00';

This will draw a circle with the stroke above the fill.

let p1 = new Path.Circle(new Point(0, 0), 1);
    p.strokeColor = '#FF0000';
    p.fillColor = null;
let p2 = new Path.Circle(new Point(0, 0), 1);
    p.strokeColor = null;
    p.fillColor = '#00FF00';
p1.moveBelow(p2);

This will draw a circle with the stroke below the fill but it requires two separate objects. I could group them, but it's still more of a pain than some native option.

Upvotes: 0

Views: 642

Answers (1)

sapics
sapics

Reputation: 1114

There are no option to draw a path stroke under the fill. Your way would be the best method for drawing it.

Upvotes: 2

Related Questions