So this is a simple image created with html code. I started with the most complicated component, the sun. The sun uses a lot of quadratic curves and took a while to figure out all the right coordinates. Then I moved to filling the sky and water and creating the clouds and the birds. The boat was pretty simple and I saved it for last.
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
//Background
context.beginPath();
context.rect(0, 0, 800, 600);
context.lineWidth = 5;
context.strokeStyle = 'rgb(0, 0, 0)';
context.fillStyle = 'rgb(230, 240, 255)';
context.fill();
context.stroke();
//Boat
context.beginPath();
context.moveTo(100, 400);
context.quadraticCurveTo(300, 670, 500, 400);
context.lineTo(100, 400);
context.closePath();
context.lineWidth = 7;
context.strokeStyle = 'rgb(0, 0, 0)';
context.fillStyle = 'rgb(245, 60, 45)';
context.fill();
context.stroke();
//Water
context.beginPath();
context.moveTo(0, 500);
context.quadraticCurveTo(100, 525, 180, 475);
context.bezierCurveTo(275, 580, 325, 535, 400, 475);
context.quadraticCurveTo(530, 570, 615, 500);
context.quadraticCurveTo(750, 550, 800, 500);
context.lineTo(800,600);
context.lineTo(0, 600);
context.lineTo(0, 500);
context.lineWidth = 5;
context.strokeStyle = 'rgb(0, 0, 0)';
context.fillStyle = 'rgb(100, 250, 255)';
context.fill();
context.stroke();
//Cloud2
context.beginPath();
context.moveTo(470, 60);
context.quadraticCurveTo(550, 80, 465, 120);
context.quadraticCurveTo(420, 190, 380, 140);
context.quadraticCurveTo(260, 140, 340, 80);
context.quadraticCurveTo(270, 20, 390, 30);
context.quadraticCurveTo(450, 5, 470, 60);
context.lineWidth = 4;
context.strokeStyle = 'rgb(255, 255, 255)';
context.fillStyle = 'rgb(255, 255, 255)';
context.fill();
context.stroke();
//Rays
context.beginPath();
context.moveTo(430, 40);
context.quadraticCurveTo(550, 175, 560, 25);
context.quadraticCurveTo(605, 140, 675, 5);
context.quadraticCurveTo(675, 160, 750, 125);
context.quadraticCurveTo(680, 200, 800,200);
context.quadraticCurveTo(630,230, 780, 325);
context.quadraticCurveTo(605, 245, 680, 380);
context.quadraticCurveTo(580, 255, 600, 425);
context.quadraticCurveTo(575, 225, 450, 375);
context.quadraticCurveTo(580, 225, 400, 250);
context.quadraticCurveTo(570, 200, 365, 180);
context.quadraticCurveTo(565, 190, 430, 40);
context.lineWidth = 5;
context.strokeStyle = 'rgb(255, 180, 0)';
context.fillStyle = 'rgb(255, 100, 0)';
context.fill();
context.stroke();
//Circle Of Sun
context.beginPath();
context.arc(600, 200, 100, 0, 2 * Math.PI, true);
context.lineWidth = 3;
context.strokeStyle = 'rgb(250, 200, 10)';
context.fillStyle = 'rgb(250, 200, 10)';
context.fill();
context.stroke();
//Cloud 1
context.beginPath();
context.moveTo(75, 125);
context.quadraticCurveTo(80, 50, 160, 120);
context.quadraticCurveTo(250, 100, 225, 175);
context.quadraticCurveTo(300, 230, 200, 240);
context.quadraticCurveTo(150, 300, 100, 210);
context.quadraticCurveTo(2, 200, 75, 125);
context.lineWidth = 4;
context.strokeStyle = 'rgb(255, 255, 255)';
context.fillStyle = 'rgb(255, 255, 255)';
context.fill();
context.stroke();
//Sails
context.beginPath();
context.moveTo(85, 390);
context.lineTo(265, 390);
context.lineTo(265, 150);
context.quadraticCurveTo(170, 250, 85, 390);
context.closePath();
context.lineWidth = 5;
context.strokeStyle = 'rgb(0, 0, 0)';
context.fillStyle = 'rgb(255, 255, 255)';
context.fill();
context.stroke();
context.beginPath();
context.moveTo(285, 390);
context.lineTo(515, 390);
context.quadraticCurveTo(410, 250, 285, 150);
context.lineTo(285, 390);
context.closePath();
context.lineWidth = 5;
context.strokeStyle = 'rgb(0, 0, 0)';
context.fillStyle = 'rgb(255, 255, 255)';
context.fill();
context.stroke();
//Birds
context.beginPath();
context.moveTo(200, 100);
context.quadraticCurveTo(240, 40, 295, 70);
context.quadraticCurveTo(350, 25, 395, 50);
context.lineWidth = 4;
context.strokeStyle = 'rgb(0, 0, 0)';
context.stroke();
context.beginPath();
context.moveTo(50, 300);
context.quadraticCurveTo(75, 200, 150, 200);
context.quadraticCurveTo(180, 100, 280, 120);
context.lineWidth = 4;
context.strokeStyle = 'rgb(0, 0, 0)';
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
