Clearing The Canvas

📝 We continue in the Speedy Chef project folder throughout this section.

The clearCanvas function

When we have finished the pizza and added it to the oven, we need to clear the canvas ready to make the next one.

As you may have guessed, we create a function to do this at the bottom of the script:

function clearCanvas() {
  // remove disabled attribute from ingredients
  const steps = document.getElementsByClassName('ingredient');
  // convert HTMLCollection to array, so we can use array methods
  Array.from(steps).forEach(function(element) {
    element.removeAttribute('disabled');
  });

  // reset any rotation values (eg ham pineapple)
  ctx.setTransform(1, 0, 0, 1, 0, 0);

  // clear canvas
  ctx.clearRect(0, 0, canvas.width, canvas.height);
}

The clearRect method

The above function uses the clearRect method. This begins in the top-left position of the canvas (0,0), and resets the full width and height of the canvas area to transparent rgba(0,0,0,0).

Calling the clearCanvas function

Then call the clearCanvas function when we add the pizza to the oven:

function addToOven() {
    pizzasCompleteForOrder++;
    const pizzaName = document.querySelector("#current_pizza").innerText;
    if (pizzaName) {
        const pizzaForOven = {
            name: pizzaName,
            timeAdded: Date.now(),
        };
        oven.push(pizzaForOven);
        displayOvenItems();
        // 1. call function
        clearCanvas();
        // 2. also reset the completedSteps array:
        completedSteps = [];
    }
}

Try this out by selecting a pizza, add the toppings, add to oven, and the canvas should automatically clear!