Drawing Circular Ingredients

Checking which ingredient was selected

Our makePizza function is being called now when we add an ingredient. We can use this to draw our pizza as we make it. Since we have different ingredient options, create a switch statement to handle this:

// bottom of index.js
function makePizza(ingredient) {
  switch (ingredient) {
    case 'ROLL DOUGH':
      break;
    case 'PIZZA SAUCE':
      break;
    case 'CHEESE':
      break;
    case 'PEPPERONI':
      break;
    case 'HAM':
      break;
    case 'PINEAPPLE':
      break;
  }
}

We do have more ingredients available, but this can be added to later as extra practice.

Creating ingredients using the arc method

Now inside of each case, set up the canvas drawing to represent ingredients. The dough, pizza sauce, and cheese are reasonably simple, we just need to draw circles using the arc method. Update the following cases:

case 'ROLL DOUGH':
  // center point x, center point y, radius,start angle, end angle
  ctx.arc(canvas.width / 2, canvas.height / 2, 100, 0, 2 * Math.PI);
  // create crust with outside line (stroke)
  ctx.lineWidth = 15;
  ctx.strokeStyle = '#f5cf89';
  ctx.stroke();
  // create background fill colour
  ctx.fillStyle = '#f5d69d';
  ctx.fill();
  break;

case 'PIZZA SAUCE':
  // red filled circle to represent sauce
  ctx.beginPath();
  ctx.arc(canvas.width / 2, canvas.height / 2, 100, 0, 2 * Math.PI);
  ctx.fillStyle = '#ed4434';
  ctx.fill();
  break;

case 'CHEESE':
  ctx.beginPath();
  ctx.arc(canvas.width / 2, canvas.height / 2, 95, 0, 2 * Math.PI);
  ctx.fillStyle = '#f7bc4d';
  ctx.fill();
  break;

Try this out in the browser by starting the game, and clicking our first three ingredients!

Coming up, we will look at the next ingredients, which are a bit more complex. Rather than creating circles like here, they involve multiple pieces at different locations.