<p>To get a proper circle, you can use a transformation matrix to transform your cell coordinates into equally spaced cartesian coordinates. In the case of your 50 x 100 pixel cells, your transformation matrix would probably either double the width or halve the height. So something like this:</p>

<pre><code>| 0.5 0.0 |
| 0.0 1.0 |
</code></pre>

<p>If you want to draw a circle of radius <code>r</code> at a center point <code>(cx, cy)</code>, you could iterate over the cells from <code>(cx - r, cy - r)</code> to <code>(cx + r, cy + r)</code> and test if each one is in the circle, and if so, fill it in, otherwise, don't. Something like this pseudocode:</p>

<pre><code>double rSquared = r * r;
for (int row = cy - r; row &lt; cy + r; row++)
{
    for (int col = cx - r; col &lt; cx + r; col++)
    {
        double x = col * transform[0][0] + row * transform[0][1];
        double y = col * transform[1][0] + row * transform[1][1];
        double distSquared = x * x + y * y;
        if (distSquared &lt;= rSquared)
        {
            // inside the circle, fill in this cell (col, row)
        }
        else
        {
            // outside the circle, don't fill in this cell (col, row)
        }
    }
}
</code></pre>

<p>As for drawing rectangles, it's not clear what you're trying to accomplish there. There's no need to use rectangles when drawing a circle.</p>

CC BY-SA 4.0
2018-07-09T07:25:44.937Z
thanks for the answer I'll had a closer look to your answer. I need to have rectangles for a reason of weight. I want (like for the example I've shown above) to have 9 rectangles (so 9 {x, y , width, height} coordinates) instead of having a large amount of pixels coordinates or lines (which are also rectangles when you think about it)
JSmith
CC BY-SA 4.0
2018-07-15T09:57:12.323Z
I've implemente your solution but it doesn't work yet. for the rectangle I was searching an implementation of [this](https://stackoverflow.com/questions/5919298/algorithm-for-finding-the-fewest-rectangles-to-cover-a-set-of-rectangles-without)
JSmith
CC BY-SA 4.0
2018-07-08T20:42:49.387Z
2018-07-08T20:42:49.387Z
user1118321
<p>I have a grid with a variable width/height spacing. Let's say 100 horizontal lines separated by 80 pixels and 100 hundred vertical lines separated by 50 pixels.</p>

<p>Each cell of the grid in my logic have the same function as a pixel. So each of my pixels will be 50 px width and 100 px height.</p>

<p>I need to draw a circle filled with a color (let's say black) and without stroke.</p>

<p>I also need my circle to (as it is made out of filled cells) be with the less rectangles as possible, so certain rectangles are bigger than other ones.</p>

<p>for example the center of the circle is made out of one big rectangle then as we go closer to the edge the rectangles becomes smaller.</p>

<p>for example here I have circle with a grid of same width/height spacing made out of 9 rectangles (sorry for the quality of the image)</p>

<p><a href="https://i.sstatic.net/TVQhu.jpg" rel="nofollow noreferrer"><img src="https://i.sstatic.net/TVQhu.jpg" alt="enter image description here"></a>
Any algorithm to do that?</p>

<algorithm><javascript><pixel-graphics><2d-graphics>
How can I draw a filled circle on a grid with the less rectangle as possible?
JSmith
# How can I draw a filled circle on a grid with the less rectangle as possible?

(Asked by: username_0 on 2018-07-05)

I have a grid with a variable width/height spacing. Let's say 100 horizontal lines separated by 80 pixels and 100 hundred vertical lines separated by 50 pixels.

Each cell of the grid in my logic have the same function as a pixel. So each of my pixels will be 50 px width and 100 px height.

I need to draw a circle filled with a color (let's say black) and without stroke.

I also need my circle to (as it is made out of filled cells) be with the less rectangles as possible, so certain rectangles are bigger than other ones.

for example the center of the circle is made out of one big rectangle then as we go closer to the edge the rectangles becomes smaller.

for example here I have circle with a grid of same width/height spacing made out of 9 rectangles (sorry for the quality of the image)

[![enter image description here](https://i.sstatic.net/TVQhu.jpg)](https://i.sstatic.net/TVQhu.jpg)
Any algorithm to do that?

**Tags:** algorithm, javascript, pixel-graphics, 2d-graphics


---

## 1 answers

### Answer by username_1 on 2018-07-08. Score: 1

To get a proper circle, you can use a transformation matrix to transform your cell coordinates into equally spaced cartesian coordinates. In the case of your 50 x 100 pixel cells, your transformation matrix would probably either double the width or halve the height. So something like this:

```
| 0.5 0.0 |
| 0.0 1.0 |

```

If you want to draw a circle of radius `r` at a center point `(cx, cy)`, you could iterate over the cells from `(cx - r, cy - r)` to `(cx + r, cy + r)` and test if each one is in the circle, and if so, fill it in, otherwise, don't. Something like this pseudocode:

```
double rSquared = r * r;
for (int row = cy - r; row < cy + r; row++)
{
    for (int col = cx - r; col < cx + r; col++)
    {
        double x = col * transform[0][0] + row * transform[0][1];
        double y = col * transform[1][0] + row * transform[1][1];
        double distSquared = x * x + y * y;
        if (distSquared <= rSquared)
        {
            // inside the circle, fill in this cell (col, row)
        }
        else
        {
            // outside the circle, don't fill in this cell (col, row)
        }
    }
}

```

As for drawing rectangles, it's not clear what you're trying to accomplish there. There's no need to use rectangles when drawing a circle.

> **Comments:**
> **username_0**: thanks for the answer I'll had a closer look to your answer. I need to have rectangles for a reason of weight. I want (like for the example I've shown above) to have 9 rectangles (so 9 {x, y , width, height} coordinates) instead of having a large amount of pixels coordinates or lines (which are also rectangles when you think about it)  
> **username_0**: I've implemente your solution but it doesn't work yet. for the rectangle I was searching an implementation of [this](https://stackoverflow.com/questions/5919298/algorithm-for-finding-the-fewest-rectangles-to-cover-a-set-of-rectangles-without)  

---

