title: Circle filled with points on canvas in paper.js
body: <p>I'm trying to fill get a circle shaped area filled with rectangles (to be precise, Raster width dimensions 12x20).</p>
  
  <p>After some research and experiments, I found one solution. To draw a circle, get its bounding box and iterate through every pixel to found that distance is smaller or equal to circle R.</p>
  
  <p>Some code sample here, I'm using three.js</p>
  
  <pre><code>let shapeSize = [12, 20];
  
  let circleR = R / 2;
  let circle = new Circle(position, circleR);
  let bounds = circle.bounds;
  for (let i = bounds.x; i &lt;= bounds.x + bounds.width; i += 1) {
    for (let j = bounds.y; j &lt;= bounds.y + bounds.height; j += 20) {
      let center = new Point(i, j);
      if (center.getDistance(position) &lt;= circleR) {
        center = new Point(i, j);
        let shape = new Shape({center, alpha: 0.7, scale: 0.8});
        j += shapeSize[1] - 1; // this part smells 
      }
    }
  }
  </code></pre>
  
  <p>Shape is square with a rester - size 12x20.</p>
  
  <p>But with this code sample, it's impossible to get a circle filled with squares. If I increment <code>i+=12</code> and <code>y+=20</code>, I get too much space around, and if by one every square is over another and it generates too many squares.</p>
  
  <p>Any idea how to do it nice and elegant?</p>