title: Fill Interior Area properly using paperjs
body: <p>I am using <code>paperjs</code> Library in nodejs for building 2D graphics. I was drawing a car but I am not able to color it properly. To resolve this, I used the <code>CompoundPath</code> Item for joining all the lines and arcs but still, it doesn't work.</p>
  <p>How can I make the area such that only the interior color gets filled? The code and the the image is shown as below:</p>
  <pre><code>const { Path, CompoundPath } = require('paper');
  const paper = require('paper');
  const fs = require('fs');
  const { Point } = require('paper-jsdom');
  const size = new paper.Size(1000, 1000);
  paper.setup(size);
  
  
  const path = new paper.Path();
  path.strokeColor = '#000000';
  
  
  const point1 = new Point(150, 200);
  
  const point2 = new Point(400, 200);
  
  const circle1 = new Path.Circle(point1, 30);
  circle1.strokeColor = '#000000';
  
  const circle2 = new Path.Circle(point2, 30);
  circle2.strokeColor = '#000000';
  
  const innerCircle1 = new Path.Circle(point1, 25);
  innerCircle1.strokeColor = '#000000';
  
  const innerCircle2 = new Path.Circle(point2, 25);
  innerCircle2.strokeColor = '#000000';
  
  circle1.fillColor = '#808080';
  innerCircle1.fillColor = '#ffffff';
  
  circle2.fillColor = '#808080';
  innerCircle2.fillColor = '#ffffff';
  
  
  const line1 = new Path.Line(point1, new Point(175, 200));
  line1.strokeColor = 'black';
  
  for (let i = 1; i &lt;=23; i += 1) {
    const cloneLine = line1.clone();
    cloneLine.rotate(15*i, point1);
  }
  
  const line2 = new Path.Line(point2, new Point(425, 200));
  line2.strokeColor = 'black';
  
  const line3 = new Path.Line(new Point(185, 200), new Point(365, 200));
  line3.strokeColor = 'black';
  
  
  for (let i = 1; i &lt;=23; i += 1) {
    const cloneLine = line2.clone();
    cloneLine.rotate(15*i, point2);
  }
  
  const arcPoint1 = new Point(185, 200);
  const arcPoint2 = new Point(155, 165);
  const arcPoint3 = new Point(115, 200);
  
  const arc = new Path.Arc(arcPoint1, arcPoint2, arcPoint3);
  arc.strokeColor = 'black';
  
  const arc2 = new Path.Arc(new Point(365, 200), new Point(395, 165), new Point(435, 200));
  arc2.strokeColor = 'black';
  
  const line4 = new Path.Line(arcPoint3, new Point(85, 200));
  line4.strokeColor = 'black';
  
  const line5 = new Path.Line(new Point(435, 200), new Point(450, 200));
  line5.strokeColor = 'black';
  
  const line6 = new Path.Arc(new Point(85,200), new Point(80, 170), new Point(85,140));
  line6.strokeColor = 'black';
  
  const line7 = new Path.Line(new Point(85, 140), new Point(160, 130));
  line7.strokeColor = 'black';
  
  const line8 = new Path.Arc(new Point(160, 130), new Point(190, 95), new Point(220, 70));
  line8.strokeColor = 'black';
  
  const line9 = new Path.Arc(new Point(220, 70), new Point(300, 65), new Point(380, 70));
  line9.strokeColor = 'black';
  
  const line10 = new Path.Arc(new Point(380, 70), new Point(405, 100), new Point(420,130));
  line10.strokeColor = 'black';
  
  const line11 = new Path.Arc(new Point(420, 130), new Point(430, 133), new Point(440, 138));
  line11.strokeColor = 'black';
  
  const line12 = new Path.Arc(new Point(440, 138), new Point(450, 160), new Point(450, 200));
  line12.strokeColor = 'black';
  
  const line13 = new Path.Arc(new Point(165, 130), new Point(195, 95), new Point(220, 75));
  line13.strokeColor = 'black';
  
  const line14 = new Path.Arc(new Point(220,75), new Point(250, 72), new Point(280, 70.5));
  line14.strokeColor = 'black';
  
  const line15 = new Path.Arc(new Point(280, 70.5), new Point(285, 95), new Point(290, 130));
  line15.strokeColor = 'black';
  
  const line16 = new Path.Line(new Point(290, 130), new Point(165, 130));
  line16.strokeColor = 'black';
  
  const line17 = new Path.Arc(new Point(285,70.5),new Point(290, 95), new Point(295, 130));
  line17.strokeColor = 'black';
  
  const line18 = new Path.Line(new Point(295, 130), new Point(370, 130));
  line18.strokeColor = 'black';
  
  const line19 = new Path.Arc(new Point(370, 130), new Point(365, 100), new Point(355, 72));
  line19.strokeColor = 'black';
  
  const line20 = new Path.Arc(new Point(355, 72), new Point(325, 71), new Point(285, 70.5));
  line20.strokeColor = 'black';
  
  const line21 = new Path.Arc(new Point(360, 72), new Point(368 ,95), new Point(375, 130));
  line21.strokeColor = 'black';
  
  const line22 = new Path.Arc(new Point(360, 72), new Point(368, 73), new Point(375, 74));
  line22.strokeColor = 'black';
  
  const line23 = new Path.Arc(new Point(375, 74), new Point(395,95), new Point(413, 130));
  line23.strokeColor = 'black';
  
  const line24 = new Path.Line(new Point(413, 130), new Point(375, 130));
  line24.strokeColor = 'black';
  
  const line25 = new Path.Line(new Point(290, 130), new Point(290, 200));
  line25.strokeColor = 'black';
  
  const line26 = new Path.Line(new Point(295, 130), new Point(295, 200));
  line26.strokeColor = 'black';
  
  const line27 = new Path.Line(new Point(165, 130), new Point(165, 162));
  line27.strokeColor = 'black';
  
  const line28 = new Path.Arc(new Point(165, 162), new Point(185, 180), new Point(190, 200));
  line28.strokeColor = 'black';
  
  const line29 = new Path.Line(new Point(370, 130), new Point(370, 172));
  line29.strokeColor = 'black';
  
  const line30 = new Path.Arc(new Point(370, 172), new Point(362.8,185), new Point(360, 200));
  line30.strokeColor = 'black';
  
  const group = new CompoundPath(
  {
   children: [
    line4,
    line5,
    line6,
    line7,
    line8,
    line9,
    line10,
    line11,
    line12,
    line3,
    arc,
    arc2,
  ]
  });
  
  // how can I configure that only interior portion gets filled ?
  group.fillColor = '#ff0000';
  group.strokeColor = '#ff0000';
  
  
  const svg = paper.project.exportSVG({asString:true});
  fs.writeFileSync('punchline.svg', svg);
  </code></pre>
  <p><a href="https://i.stack.imgur.com/brALm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/brALm.png" alt="Making of Car using paperjs" /></a></p>