<!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.fillStyle = '41449B';
context.fill();
//cloud 1
context.beginPath();
context.moveTo(0, 100);
context.bezierCurveTo(200, 150, 500, 50, 800, 100);
context.lineTo(800, 200)
context.bezierCurveTo(500, 100, 200, 250, 0, 200);
context.lineTo(0, 100);
context.closePath();
context.fillStyle = 'rgba(255, 0, 0, .2)';
context.fill();
context.strokeStyle = 'rgba(255, 0, 0, .1)';
context.stroke();
//cloud 2
context.beginPath();
context.moveTo(0, 100);
context.bezierCurveTo(300, 250, 600, 60, 900, 200);
context.lineTo(800, 200)
context.bezierCurveTo(600, 200, 300, 350, 0, 300);
context.lineTo(0, 100);
context.closePath();
context.fillStyle = 'rgba(255, 0, 0, .2)';
context.fill();
context.strokeStyle = 'rgba(255, 0, 0, .1)';
context.stroke();
//moon
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 70;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = '#AEAEAE';
context.fill();
context.lineWidth = 5;
context.strokeStyle = '#AEAEAE';
context.stroke();
//cloud 3
context.beginPath();
context.moveTo(0, 100);
context.bezierCurveTo(100, 50, 400, 40, 800, 100);
context.lineTo(800, 200)
context.bezierCurveTo(400, 100, 100, 150, 0, 100);
context.lineTo(0, 100);
context.closePath();
context.fillStyle = 'rgba(255, 0, 0, .2)';
context.fill();
context.strokeStyle = 'rgba(255, 0, 0, .1)';
context.stroke();
//cloud 4
context.beginPath();
context.moveTo(0, 100);
context.bezierCurveTo(330, 270, 600, 60, 900, 200);
context.lineTo(800, 200)
context.bezierCurveTo(700, 400, 100, 150, 0, 300);
context.lineTo(0, 100);
context.closePath();
context.fillStyle = 'rgba(255, 0, 0, .2)';
context.fill();
context.strokeStyle = 'rgba(255, 0, 0, .1)';
context.stroke();
//mountain 1
context.beginPath();
context.moveTo(100, 700);
context.lineTo(700, 600);
context.quadraticCurveTo(500, 100, 400, 600);
context.lineWidth = 5;
context.strokeStyle = '#ACAEFD';
context.stroke();
context.fillStyle = '#ACAEFD';
context.fill();
//mountain 1
context.beginPath();
context.moveTo(100, 700);
context.lineTo(100, 600);
context.quadraticCurveTo(50, 150, 0, 600);
context.lineWidth = 5;
context.strokeStyle = '#ACAEFD';
context.stroke();
context.fillStyle = '#ACAEFD';
context.fill();
//mountain 2
context.beginPath();
context.moveTo(100, 700);
context.lineTo(100, 600);
context.quadraticCurveTo(-20, 100, 0, 600);
context.lineWidth = 5;
context.strokeStyle = '#BDBFFE';
context.stroke();
context.fillStyle = '#BDBFFE';
context.fill();
//mountain 3
context.beginPath();
context.moveTo(100, 700);
context.lineTo(100, 600);
context.quadraticCurveTo(300, -100, 300, 600);
context.lineWidth = 5;
context.strokeStyle = '#ACAEFD';
context.stroke();
context.fillStyle = '#ACAEFD';
context.fill();
//mountain 4
context.beginPath();
context.moveTo(100, 700);
context.lineTo(600, 600);
context.quadraticCurveTo(400, 100, 100, 600);
context.lineWidth = 5;
context.strokeStyle = '#BDBFFE';
context.stroke();
context.fillStyle = '#BDBFFE';
context.fill();
//mountain 5
context.beginPath();
context.moveTo(400, 600);
context.lineTo(1000, 600);
context.quadraticCurveTo(800, -20, 600, 600);
context.lineWidth = 5;
context.strokeStyle = '#ACAEFD';
context.stroke();
context.fillStyle = '#ACAEFD';
context.fill();
//mountain 6
context.beginPath();
context.moveTo(300, 600);
context.lineTo(300, 600);
context.quadraticCurveTo(100, 0, 30, 600);
context.lineWidth = 5;
context.strokeStyle = '#DADBFE';
context.stroke();
context.fillStyle = '#DADBFE';
context.fill();
//mountain 7
context.beginPath();
context.moveTo(400, 600);
context.lineTo(800, 600);
context.quadraticCurveTo(600, -100, 500, 600);
context.lineWidth = 5;
context.strokeStyle = '#DADBFE';
context.stroke();
context.fillStyle = '#DADBFE';
context.fill();
//mountain 8
context.beginPath();
context.moveTo(400, 600);
context.lineTo(200, 600);
context.quadraticCurveTo(400, 35, 500, 600);
context.lineWidth = 5;
context.strokeStyle = '#EEEEFF';
context.stroke();
context.fillStyle = '#EEEEFF';
context.fill();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>