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