Workshop › Angry Birds-style Slingshot › Step 5 of 47

A bird in the sling

What we are doing

The bird is a red circle of radius BIRD sitting on top of the sling. Its color comes from a MATERIALS table, which will later also hold wood, stone and pigs.

```js
const BIRD = 10 // the bird is a 20 by 20 box
const MATERIALS = {
  bird: { color: '#dc2626', density: 4 },
}

  ctx.fillStyle = MATERIALS.bird.color
  ctx.beginPath()
  ctx.arc(SLING.x, SLING.y, BIRD, 0, Math.PI * 2)
  ctx.fill()
```

What it means

MATERIALS is an object that holds objects: MATERIALS.bird.color is the bird's red. density will make heavy things heavy later.
A circle is a path: beginPath() starts a new shape, arc(x, y, radius, start, end) traces the circle from angle 0 to Math.PI * 2 (a full turn), and fill() paints its inside.

Your turn

Under the SLING line write BIRD and MATERIALS.
In draw, under the sling post's fillRect, write the four circle lines.

Skills: Drawing on a canvas

← The aim: an angle and a pull Pull the bird back →

All steps