How to understand canvas?

Question

JavaScript

Hello kitties!
I deal with simple animation from textbooks:
https://jsfiddle.net/3Leh8c1t/25/
It seems that there is not enough code and there are descriptions of all methods, but I just can’t stick how they spin. Yes, and with the shadow, too, nicherta is not clear.
On line 17 This is a black fill with translucency. But I don't understand why this fill only works on a rectangle of line 26? Why isn't the entire canvas being filled? I don't see any bindings. The idea is to create a frame, but I do not see the difference if I comment out this line.
ctx.fillStyle = 'rgba(0, 0, 0, 0.4)';
ctx.fillRect(0, -12, 50, 24); // Shadow
ctx.strokeStyle = 'rgba(0, 153, 255, 0.4)';
Who works with this, how does it happen in general? There is a color 0, 153, 255 - do I need to open a separate tab with the rgb service and manually enter these numbers? Is there any easier way to do this? Or am I going in the wrong direction at all? Debugging is also not clear, I can put a breakpoint at the beginning of the draw function. But the step-by-step launch does not show anything; after exiting the function, it immediately shows the finished result. That is, for debugging, I need to get rid of the time and pass some fixed selected value to the ctx.rotate function, manually restart the script to look frame by frame, right?
Explain with the orbits of the planets, too, please. I do not understand why the Earth revolves in its orbit, and the Moon in its own, and even around the moving Earth? I see lines:

ctx.rotate(((2 * Math.PI) / 60) * time.getSeconds() + ((2 * Math.PI) / 60000) * time.getMilliseconds());
  ctx.translate(105, 0);
  ctx.drawImage(earth, -12, -12);

That is, the logic of work is as follows: we rotate the entire canvas at a certain angle. After that, we shift the center of the entire canvas. Why after? We have already rotated the canvas as we need!
After we have drawn the earth, we draw the moon. And here it is not at all clear. The ground is already present on the canvas, that is, similar rotations and center shifts should work on it too. Again, but we have already done actions with it and with the canvas itself. Lines 30 //ctx.save(); and 34 //ctx.restore(); in the section with the moon, you can safely comment out, they do not affect the execution.
And the most important question, how can you think of it yourself? It is still possible to disassemble such (very simple) someone else's code, but how to think of this on your own, I don’t understand? Maybe my brain is already old and it thinks differently, it's just not mine?
Please chew this example for me and tell me how the process of developing such things works?

Answer 1

The fillStyle property sets the style of the brush, so to speak, as in Photoshop. You select the fill color in Photoshop, and then fill it (fillRect at the specified coordinates).
Can be set with constants, such as red, blue, green, etc.
If strokeStyle or fillStyle are not set, their default value is taken, which is like white.
You need experience, just write a lot of such things, read about such things, and all this will become elementary.