// Bornholm's Rocks

ctx.fillStyle = "#F7D8A3"; // set fill color to light yellow

ctx.fillRect(0, 0, 512, 512); // fill the canvas with the color



// draw the rocks

ctx.fillStyle = "#A3A3A3"; // set fill color to gray

ctx.beginPath();

ctx.moveTo(200, 150);

ctx.lineTo(150, 250);

ctx.lineTo(200, 300);

ctx.lineTo(250, 300);

ctx.lineTo(300, 250);

ctx.lineTo(250, 150); // create a polygon shape for the rock

ctx.closePath();

ctx.fill(); // fill the polygon with the color



ctx.beginPath();

ctx.moveTo(350, 200);

ctx.lineTo(300, 300);

ctx.lineTo(350, 350);

ctx.lineTo(400, 350);

ctx.lineTo(450, 300);

ctx.lineTo(400, 200); // create another polygon shape for the rock

ctx.closePath();

ctx.fill(); // fill the polygon with the color



// add details to the rocks

ctx.fillStyle = "#797979"; // set fill color to dark gray

ctx.beginPath();

ctx.moveTo(200, 200);

ctx.lineTo(175, 250);

ctx.lineTo(200, 275);

ctx.lineTo(225, 275);

ctx.lineTo(250, 250);

ctx.lineTo(225, 200); // create a smaller polygon shape for the detail

ctx.closePath();

ctx.fill(); // fill the polygon with the color



ctx.beginPath();

ctx.moveTo(350, 225);

ctx.lineTo(325, 275);

ctx.lineTo(350, 300);

ctx.lineTo(375, 300);

ctx.lineTo(400, 275);

ctx.lineTo(375, 225); // create another smaller polygon shape for the detail

ctx.closePath();

ctx.fill(); // fill the polygon with the color



// add some grass

ctx.fillStyle = "#B5E61D"; // set fill color to green

ctx.beginPath();

ctx.moveTo(150, 350);

ctx.lineTo(175, 400);

ctx.lineTo(200, 350);

ctx.lineTo(225, 400);

ctx.lineTo(250, 350);

ctx.lineTo(275, 400);

ctx.lineTo(300, 350);

ctx.lineTo(325, 400);

ctx.lineTo(350, 350);

ctx.lineTo(375, 400);

ctx.lineTo(400, 350);

ctx.lineTo(425, 400); // create a wavy shape for the grass

ctx.lineTo(450, 350);

ctx.lineTo(450, 450);

ctx.lineTo(150, 450); // complete the shape

ctx.closePath();

ctx.fill(); // fill the shape with the color



// add some flowers

ctx.fillStyle = "#FF1493"; // set fill color to pink

ctx.beginPath();

ctx.arc(225, 425, 10, 0, Math.PI * 2); // create a circle for the flower

ctx.fill(); // fill the circle with the color



ctx.fillStyle = "#FFFFFF"; // set fill color to white

ctx.beginPath();

ctx.arc(225, 425, 5, 0, Math.PI * 2); // create a smaller circle for the center of the flower

ctx.fill(); // fill the circle with the color



ctx.fillStyle = "#FF1493"; // set fill color to pink

ctx.beginPath();

ctx.arc(375, 375, 8, 0, Math.PI * 2); // create another circle for the flower

ctx.fill(); // fill the circle with the color



ctx.fillStyle = "#FFFFFF"; // set fill color to white

ctx.beginPath();

ctx.arc(375, 375, 4, 0, Math.PI * 2); // create a smaller circle for the center of the flower

ctx.fill(); // fill the circle with the color



// add a sun

ctx.fillStyle = "#FFD700"; // set fill color to yellow

ctx.beginPath();

ctx.arc(450, 50, 30, 0, Math.PI * 2); // create a circle for the sun

ctx.fill(); // fill the circle with the color



// add some rays to the sun

ctx.strokeStyle = "#FFD700"; // set stroke color to yellow

ctx.lineWidth = 5; // set line width to 5 pixels

ctx.beginPath();

ctx.moveTo(450, 0);

ctx.lineTo(450, 20); // create a line for each ray

ctx.moveTo(450, 80);

ctx.lineTo(450, 100);

ctx.moveTo(480, 50);

ctx.lineTo(500, 50);

ctx.moveTo(400, 50);

ctx.lineTo(420, 50);

ctx.stroke(); // draw the lines



// add a seagull

ctx.fillStyle = "#FFFFFF"; // set fill color to white

ctx.beginPath();

ctx.arc(100, 100, 20, 0, Math.PI * 2); // create a circle for the body of the seagull

ctx.fill(); // fill the circle with the color



ctx.beginPath();

ctx.moveTo(80, 100);

ctx.lineTo(100, 80);

ctx.lineTo(120, 100); // create a triangle shape for the wings of the seagull

ctx.closePath();

ctx.fill(); // fill the triangle with the color



ctx.strokeStyle = "#000000"; // set stroke color to black

ctx.lineWidth = 2; // set line width to 2 pixels

ctx.beginPath();

ctx.moveTo(90, 95);

ctx.lineTo(80, 90);

ctx.moveTo(110, 95); // create two lines for the eyes of the seagull

ctx.lineTo(120, 90);

ctx.stroke(); // draw the lines



// add some water

ctx.fillStyle = "#00BFFF"; // set fill color to blue

ctx.fillRect(0, 450, 512, 62); // fill the bottom part of the canvas with the color



// add some waves to the water

ctx.strokeStyle = "#FFFFFF"; // set stroke color to white

ctx.lineWidth = 3; // set line width to 3 pixels

ctx.beginPath();

ctx.moveTo(0, 500);

ctx.quadraticCurveTo(50, 475, 100, 500); // create a curve for the waves

ctx.quadraticCurveTo(150, 525, 200, 500);

ctx.quadraticCurveTo(250, 475, 300, 500);

ctx.quadraticCurveTo(350, 525, 400, 500);

ctx.quadraticCurveTo(450, 475, 500, 500);

ctx.stroke(); // draw the curve



// add a fish in the water

ctx.fillStyle = "#FFDAB9"; // set fill color to light salmon

ctx.beginPath();

ctx.arc(50, 480, 10, 0, Math.PI * 2); // create a circle for the body of the fish

ctx.fill(); // fill the circle with the color



ctx.fillStyle = "#FFA07A"; // set fill color to salmon

ctx.beginPath();

ctx.arc(70, 480, 7, 0, Math.PI * 2); // create a smaller circle for the tail of the fish

ctx.fill(); // fill the circle with the color



// add a caption

// "Bornholm's Rocks" - where rocks, grass, flowers, sun, seagull, water and a fish live in harmony

// because the rocks are cool and the fish is chill.