how to fill a circle inside a small square?

Question

I need to draw/fill circles inside small squares of 5 pixels. but when I do so, it looks just like if I filled a square inside it and not a circle. When trying to fill a circle inside a square of 10 pixels it looks just alright. the test code is really simple:

    g.drawRect(10,10,5,5);
    g.fillOval(10,10, 5, 5);

    g.drawRect(30,30,10,10);
    g.fillOval(30,30,10,10);

I get the result shown in the picture

is it just normal or am I doing it the wrong way?

Answer 1

A 5x5 square is actually 6x6 pixels in size, so draw a 6x6 set of boxes representing pixels.

Now draw how you would fill a circle inside that square.

Here, let me show you what the system does:

    5x5 Square              5x5 Circle
┌──┬──┬──┬──┬──┬──┐     ┌──┬──┬──┬──┬──┬──┐
│██│██│██│██│██│██│     │  │  │  │  │  │  │
├──┼──┼──┼──┼──┼──┤     ├──┼──┼──┼──┼──┼──┤
│██│  │  │  │  │██│     │  │██│██│██│██│  │
├──┼──┼──┼──┼──┼──┤     ├──┼──┼──┼──┼──┼──┤
│██│  │  │  │  │██│     │  │██│██│██│██│  │
├──┼──┼──┼──┼──┼──┤     ├──┼──┼──┼──┼──┼──┤
│██│  │  │  │  │██│     │  │██│██│██│██│  │
├──┼──┼──┼──┼──┼──┤     ├──┼──┼──┼──┼──┼──┤
│██│  │  │  │  │██│     │  │██│██│██│██│  │
├──┼──┼──┼──┼──┼──┤     ├──┼──┼──┼──┼──┼──┤
│██│██│██│██│██│██│     │  │  │  │  │  │  │
└──┴──┴──┴──┴──┴──┘     └──┴──┴──┴──┴──┴──┘

Now overlay the circle onto your square. You get that filled square you saw.

     Combined
┌──┬──┬──┬──┬──┬──┐
│██│██│██│██│██│██│
├──┼──┼──┼──┼──┼──┤
│██│██│██│██│██│██│
├──┼──┼──┼──┼──┼──┤
│██│██│██│██│██│██│
├──┼──┼──┼──┼──┼──┤
│██│██│██│██│██│██│
├──┼──┼──┼──┼──┼──┤
│██│██│██│██│██│██│
├──┼──┼──┼──┼──┼──┤
│██│██│██│██│██│██│
└──┴──┴──┴──┴──┴──┘

---

           10x10 Square                           10x10 Circle
┌──┬──┬──┬──┬──┬──┬──┬──┬──┬──┬──┐     ┌──┬──┬──┬──┬──┬──┬──┬──┬──┬──┬──┐
│██│██│██│██│██│██│██│██│██│██│██│     │  │  │  │  │  │  │  │  │  │  │  │
├──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┤     ├──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┤
│██│  │  │  │  │  │  │  │  │  │██│     │  │  │  │██│██│██│██│██│  │  │  │
├──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┤     ├──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┤
│██│  │  │  │  │  │  │  │  │  │██│     │  │  │██│██│██│██│██│██│██│  │  │
├──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┤     ├──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┤
│██│  │  │  │  │  │  │  │  │  │██│     │  │██│██│██│██│██│██│██│██│██│  │
├──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┤     ├──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┤
│██│  │  │  │  │  │  │  │  │  │██│     │  │██│██│██│██│██│██│██│██│██│  │
├──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┤     ├──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┤
│██│  │  │  │  │  │  │  │  │  │██│     │██│██│██│██│██│██│██│██│██│██│  │
├──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┤     ├──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┤
│██│  │  │  │  │  │  │  │  │  │██│     │  │██│██│██│██│██│██│██│██│██│  │
├──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┤     ├──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┤
│██│  │  │  │  │  │  │  │  │  │██│     │  │██│██│██│██│██│██│██│██│██│  │
├──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┤     ├──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┤
│██│  │  │  │  │  │  │  │  │  │██│     │  │  │██│██│██│██│██│██│██│  │  │
├──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┤     ├──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┤
│██│  │  │  │  │  │  │  │  │  │██│     │  │  │  │██│██│██│██│██│  │  │  │
├──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┤     ├──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┤
│██│██│██│██│██│██│██│██│██│██│██│     │  │  │  │  │  │  │  │  │  │  │  │
└──┴──┴──┴──┴──┴──┴──┴──┴──┴──┴──┘     └──┴──┴──┴──┴──┴──┴──┴──┴──┴──┴──┘

             Combined
┌──┬──┬──┬──┬──┬──┬──┬──┬──┬──┬──┐
│██│██│██│██│██│██│██│██│██│██│██│
├──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┤
│██│  │  │██│██│██│██│██│  │  │██│
├──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┤
│██│  │██│██│██│██│██│██│██│  │██│
├──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┤
│██│██│██│██│██│██│██│██│██│██│██│
├──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┤
│██│██│██│██│██│██│██│██│██│██│██│
├──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┤
│██│██│██│██│██│██│██│██│██│██│██│
├──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┤
│██│██│██│██│██│██│██│██│██│██│██│
├──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┤
│██│██│██│██│██│██│██│██│██│██│██│
├──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┤
│██│  │██│██│██│██│██│██│██│  │██│
├──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┤
│██│  │  │██│██│██│██│██│  │  │██│
├──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┤
│██│██│██│██│██│██│██│██│██│██│██│
└──┴──┴──┴──┴──┴──┴──┴──┴──┴──┴──┘