But isn't it odd that you can draw a filled rectangle using
ctx.fillRect(50, 50, 150, 20);
But to draw a filled circle you need
ctx.beginPath();
ctx.arc(130, 150, 30, 0, Math.PI * 2);
ctx.fill();
Why can we do a rectangle in one statement (line), but it needs three for a circle?
Well, it's a glimpse into a far more powerful aspect of the HTML canvas that lets you build up all sorts of complex shapes like stars and other things, and then stroke or fill them, or do even more powerful things with them.
In brief, the designers of the HTML canvas felt that rectangles are so frequently used that it's worthwhile providing a concise way to draw them, but circles could afford to fall into the more powerful, but more long-winded category.
But that creates a delicious
opportunity for us to introduce a
really powerful feature of Javascript...