Draw Different Types Of Moons

I recently read this Draw A Star tutorial by @TIMAI2, and I was thinking about how to draw moons on a canvas.

However, unlike stars, moons have different patterns over days, as shown in the image below. The white parts are the parts that you will see at night, while the gray parts are the ones you couldn't see.

I worked out some solutions to some of the moons here. For New Moon, you do not need to draw anything.

Waning Crescent

Full Moon

Have fun finding out the other moons!

1 Like

for waning crescent, if there is other drawing very close to it on right side, that will be over written.


I know. It draws two circles, one in yellow and the other in the background color. The yellow circle will be drawn at the first time, and the circle with the background color covers a part of the circle, making it look like a waning crescent. However, if there is any other stuff near the yellow circle, that will be covered.


Taken from Drawing a crescent moon like shape-VBForums.

1 Like

Wait. Visual Basic is not related to App Inventor! I don't understand post #3

I was just taking the image as an example.

1 Like

Oh I see, ok.

But the logic is same on most of the programming languages :wink: !

1 Like

However, if you draw the drawings near it after drawing the moon, everything will be fine.

1 Like

The following html code will also give you all moon phases. Past them in a label and set the size you need.



another solution is to make a point list of the edge of moon and use DrawShape block. but it will be very complicated.

1 Like

@Peter I was expecting for someone to use the DrawShape block, when you had an idea to use text :slight_smile:.

It could be, but you can also use different procedures and call them at different times.


Moons with circles and arcs (basic)


drawMoons.aia (5.1 KB)


Great Tim :+1: really appreciate the work.

Also, as suggested by @Kevinkun , moons drawn using drawShape


drawShapeMoons.aia (8.7 KB)

This done by using the equation:

(pointX,pointY)=((x + rcosφ),(y + rsinφ))

which gives you the position of a point on the circumference of a circle, using the radius and the x,y position of the circle, where φ is the angle. Loop this over a range to get your shape.

(I just drew a circle for the full moon :wink: )


I expected an animated phases of the moon. Is that possible using a canvas?

Yes, that is possible, why not have a go? :slight_smile:


Ok let me try that :slight_smile:

I like both projects, but for newbies, I would lean a little bit to your own project.

1 Like

i tried to, but the animation didn't work!

for testing, clock timer interval is 1000 ms (1 second)

Of course it will not. Look in your blocks. When the clock times '1' second, it does everything at the same time.


so how can i make the animation? please help me please?