Docs: improve documentation for graphics

[KokoDoko]

Context

I find the documentation for working with graphics a bit confusing / contradictory (not talking about spritesheet animations).

• There are pages for Graphics, GraphicsComponent, GraphicsGroup and GraphicsContext, and they cross reference each other.
• There are mentions of canvas and raster graphics without explaining what that means.
• The graphics component page has an example for graphicsgroup and even a paperdoll example with actors, but this is not mentioned on the actual graphicsgroup page
• It's not really clear when to use a graphicsgroup and when to use the "paperdoll" child actors example
• If someone just wants to draw a shape it's hard to find a simple code snippet.
• The 0.29 release notes state that "Remove confusing Graphics Layering from ex.GraphicsComponent, recommend we use the ex.GraphicsGroup to manage this behavior", but this is not yet mentioned in the real docs.

Proposal

• Merge the graphics page and the graphics component page
• Move the paperdoll and graphicsgroup example from graphics component page to graphics group page
• Explain when to use a graphicsgroup and when to use the "paper doll" style of child actors
• Clarify if show hide is still needed or can we just do use() to replace a graphic
• Explain the use case for using new Canvas()
• The graphics page could start with simple examples for drawing shapes such as

const actor = new ex.Actor()
const circle = new ex.Circle({
  radius: 10,
  color: ex.Color.Red,
  strokeColor: Color.Red,
  lineWidth: .5
});
actor.graphics.use(circle);

[eonarheim]

@KokoDoko 100% agree, this would be a net win

[github-actions]

This issue hasn't had any recent activity lately and is being marked as stale automatically.