But first, let's look at a really powerful way to make complexity easier to handle.
Recall we can draw a 10x10 filled square in the centre of the canvas using:
ctx.fillRect(150, 50, 150, 150);
But for a circle of radius 10, we have to use:
ctx.beginPath();
ctx.arc(150, 150, 10, 0, Math.PI * 2);
ctx.fill();
Wouldn't it be much easier if we could just use
fillCircle(150, 150, 10);
But we can't, because there's
no such thing as fillCircle.
We'll make one.