Let’s make our bubble wrap more believable! You’ve been given a starter code that will fill the canvas with light blue bubbles. It’s now your turn to add a highlight to the top right corner of each bubble. To do this: • Don’t alter Tracy’s first step of filling the canvas with circles. Instead, add another function that will be used after all circles are drawn. • Write a function called make_highlight that will draw a white quarter-circle with a radius of 10 • Make sure you include a way to be sure the highlight is being drawn in the correct location Hint: You should be able to reuse the move_up_a_row function that has already been defined.

To add a highlight to the top right corner of each bubble in your canvas, you can create a function called `make_highlight` that will draw a small white quarter-circle. Here’s how to achieve it step-by-step:

1. Define the `make_highlight` function: This function will take the current position of the bubble as input and draw a quarter-circle at the appropriate location.

2. Use the `move_up_a_row` function: This function can help you arrange the highlights correctly based on the positions of the bubbles.

Here’s a sample code structure you can follow:

function make_highlight(x, y) {

// Save the current drawing state

context.save();

// Translate the context to the position of the bubble

context.translate(x, y);

// Begin a new path for the quarter-circle

context.beginPath();

context.arc(0, -10, 10, 0, Math.PI / 2); // Draw a quarter-circle

context.closePath();

// Set the fill color to white for the highlight

context.fillStyle = "white";

context.fill();

// Restore the context to its original state

context.restore();

}

// After you've drawn all the circles, loop through their positions to add highlights

for (let i = 0; i < numberOfBubbles; i++) {

let x = ...; // Calculate x position