1. I need to create a sand castle shaped like the one shown in the screenshot below that is located on the right side of the beach.

2. I need to use strokeRect(x,y,w,h) to outline the castle.

my html

/span> html>

charset="utf-8">

Canvas

="ex7.js" type="text/javascript" defer>

Fun on the Beach

id="myCanvas" height="500" width="800" style="border: 1px solid black">

My Js

ctx.arc(100, 100, 80, 0, 2 * Math.PI); //sun

ctx.fill();

ctx.fillStyle = "DarkOrange";

ctx.beginPath();

ctx.arc(MID, GROUND - 150, 150, Math.PI, 2 * Math.PI); // umbrella

ctx.fill();

ctx.fillStyle = "purple"; // first circle

ctx.beginPath();

ctx.arc(MID, GROUND - 175, 20, 0, 2 * Math.PI);

ctx.fill();

ctx.fillStyle = "purple"; // second circle

ctx.beginPath();

ctx.arc(MID - 100, GROUND - 175, 20, 0, 2 * Math.PI);

ctx.fill();

ctx.fillStyle = "purple"; // third circle

ctx.beginPath();

ctx.arc(MID + 100, GROUND - 175, 20, 0, 2 * Math.PI);

ctx.fill();

ctx.beginPath();

ctx.fillStyle = "darkgray";

ctx.fillRect(MID, GROUND-150, 10, 200); // umbrella

ctx.fill();

ctx.font = "30px Georgia";

ctx.fillStyle = "black"

ctx.strokeText("my name", width - 120, 30);

ctx.fillStyle = "brown";

ctx.strokeRect(600, GROUND - 50, 100, 100);

Your Name