<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
//Rectangle
var grdstartX = 400;
var grdstartY = 0;
var grdendX = 400;
var grdendY = 600;
//Rectangle
context.beginPath();
context.rect(0, 0, canvas.width, canvas.height);
var grd = context.createLinearGradient(grdstartX, grdstartY, grdendX, grdendY);
//Purple
grd.addColorStop(0, 'rgb(255, 69, 0)');
//Blue
grd.addColorStop(1, 'rgb(0, 0, 255)');
context.fillStyle = grd;
context.fill();
context.stroke();
// bottom boat
var startX = 250;
var startY = 300;
var controlX = 300;
var controlY = 500;
var controlX = 500;
var controlY = 500;
var endX = 550;
var endY = 300;
//line across boat
var startX = 250;
var startY = 300;
var endX = 550;
var endY = 300;
// waves
var startX = 0;
var startY = 500 ;
var controlX = 100;
var controlY = 400;
var endX = 200;
var endY = 500;
var startX = 200;
var startY = 500;
var controlX = 300;
var controlY = 400;
var endX = 400;
var endY = 500;
var startX = 400;
var startY = 500;
var controlX = 300;
var controlY = 400;
var endX = 800;
var endY = 500;
var startX = 600;
var startY = 500;
var controlX = 700;
var controlY = 400;
var endX = 800;
var endY = 500;
var startX = 800;
var startY = 500;
var controlX = 900;
var controlY = 1000;
var endX = 0;
var endY = 500;
// flag post
var startX = 450;
var startY = 300;
var endX = 450;
var endY = 50;
//flag slanted part
var startX = 450;
var startY = 50;
var endX = 600;
var endY = 150;
//flag bottom part
var startX = 600;
var startY = 150;
var endX = 450;
var endY = 150;
// fishing pole
var startX = 300;
var startY = 300;
var endX = 250;
var endY = 200;
var startX = 250;
var startY = 200;
var endX = 150;
var endY = 500;
//hook
var startX = 150;
var startY = 500;
var controlX = 150;
var controlY = 550;
var endX = 175;
var endY = 525;
//sun
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 70;
// fish body
var startX = 350 ;
var startY = 550 ;
var controlX = 300;
var controlY = 500;
var endX = 250;
var endY = 550;
var startX = 250 ;
var startY = 550 ;
var controlX = 300;
var controlY = 600;
var endX = 350;
var endY = 550;
//fish tail
var startX = 350;
var startY = 550;
var endX = 375;
var endY = 525;
var startX = 375;
var startY = 525;
var endX = 375;
var endY = 575;
var startX = 375;
var startY = 575;
var endX = 350;
var endY = 550;
//Curve
context.beginPath();
context.moveTo(250, 300);
context.bezierCurveTo(300, 500, 500, 500, 550, 300);
context.lineWidth = 5;
context.stroke();
// butt of boat
context.beginPath();
context.moveTo(250, 300);
context.lineTo(550, 300);
context.lineWidth = 5;
context.stroke();
context.beginPath();
context.moveTo(250, 300);
context.bezierCurveTo(300, 500, 500, 500, 550, 300);
context.lineTo(250, 300);
context.lineCap = "round";
context.lineWidth = 5;
context.fillStyle = 'rgb(50, 205, 50)';
context.fill();
context.stroke();
// Waves
context.beginPath();
context.moveTo(0, 500);
context.quadraticCurveTo(100, 400, 200, 500);
context.lineWidth = 5;
context.stroke();
context.beginPath();
context.moveTo(200, 500);
context.quadraticCurveTo(300, 400, 400, 500);
context.lineWidth = 5;
context.stroke();
context.beginPath();
context.moveTo(400, 500);
context.quadraticCurveTo(500, 400, 600, 500);
context.moveTo(600, 500);
context.quadraticCurveTo(700, 400, 800, 500);
context.moveTo(800, 500);
context.quadraticCurveTo(900, 400, 1000, 500);
context.lineWidth = 5;
context.stroke();
context.begi
//seagull left
context.beginPath();
context.moveTo(600, 50);
context.quadraticCurveTo(650, 25, 700, 50);
context.strokeStyle = 'rgb(255, 255, 255)';
context.lineWidth = 5;
context.stroke();
var startX = 600;
var startY = 50 ;
var controlX = 650;
var controlY = 25;
var endX = 700;
var endY = 50;
//seagull right
context.beginPath();
context.moveTo(700, 50);
context.quadraticCurveTo(750, 25, 800, 50);
context.strokeStyle = 'rgb(255, 255, 255)';
context.lineWidth = 5;
context.stroke();
var startX = 700;
var startY = 50 ;
var controlX = 750;
var controlY = 25;
var endX = 800;
var endY = 50;
//seagull far left left side
context.beginPath();
context.moveTo(50, 200);
context.quadraticCurveTo(75, 175, 100, 200);
context.strokeStyle = 'rgb(255, 255, 255)';
context.lineWidth = 5;
context.stroke();
var startX = 50;
var startY = 200 ;
var controlX = 75;
var controlY = 175;
var endX = 100;
var endY = 200;
//seagull far left right side
context.beginPath();
context.moveTo(100, 200);
context.quadraticCurveTo(125, 175, 150, 200);
context.strokeStyle = 'rgb(255, 255, 255)';
context.lineWidth = 5;
context.stroke();
var startX = 100;
var startY = 200 ;
var controlX = 175;
var controlY = 150;
var endX = 150;
var endY = 200;
// seagull middle
context.beginPath();
context.moveTo(200, 150);
context.quadraticCurveTo(250, 100, 300, 150);
context.strokeStyle = 'rgb(255, 255, 255)';
context.moveTo(300, 150);
context.quadraticCurveTo(350, 100, 400, 150);
context.lineWidth = 5;
context.strokeStyle = 'rgb(255, 255, 255)';
context.stroke();
var startX = 200;
var startY = 150 ;
var controlX = 250;
var controlY = 100;
var endX = 300;
var endY = 150;
var startX = 300;
var startY = 150 ;
var controlX = 350;
var controlY = 100;
var endX = 400;
var endY = 150;
//seagull near boat
context.beginPath();
context.moveTo(600, 300);
context.quadraticCurveTo(650, 250, 700, 300);
context.strokeStyle = 'rgb(255, 255, 255)';
context.moveTo(700, 300);
context.quadraticCurveTo(750, 250, 800, 300);
context.strokeStyle = 'rgb(255, 255, 255)';
context.lineWidth = 5;
context.stroke();
var startX = 600;
var startY = 300 ;
var controlX = 650;
var controlY = 250;
var endX = 700;
var endY = 300;
var startX = 700;
var startY = 300 ;
var controlX = 750;
var controlY = 250;
var endX = 800;
var endY = 300;
// flag pole
context.beginPath();
context.moveTo(450, 300);
context.lineTo(450, 50);
context.strokeStyle = 'rgb(0, 0, 0)';
context.fill();
context.lineWidth = 5;
context.stroke();
context.beginPath();
context.moveTo(600, 150);
context.lineTo(450, 150);
context.strokeStyle = 'rgb(0, 0, 0)';
context.fill();
context.lineWidth = 5;
context.stroke();
context.beginPath();
context.moveTo(450, 50);
context.lineTo(600, 150);
context.strokeStyle = 'rgb(0, 0, 0)';
context.fill();
context.lineWidth = 5;
context.stroke();
// Circle
context.beginPath();
context.arc(0, 0, 130, 0, 2 * Math.PI, false);
context.lineCap = "round";
context.lineWidth = 3;
context.fillStyle = 'rgb(255, 255, 0)';
context.fill();
context.stroke();
//fishing pole
context.beginPath();
context.moveTo(300, 300);
context.lineTo(250, 200);
context.lineWidth = 5;
context.stroke();
//string of fishing pole
context.beginPath();
context.moveTo(250, 200);
context.lineTo(150, 500);
context.strokeStyle = 'rgb(250, 250, 250)';
context.lineWidth = 2;
context.stroke();
context.beginPath();
context.moveTo(350, 550);
context.quadraticCurveTo(300, 500, 250, 550);
context.fill();
context.lineWidth = 5;
context.stroke();
// part of fish body
context.beginPath();
context.moveTo(250, 550);
context.quadraticCurveTo(300, 600, 350, 550);
context.fillStyle = 'rgb(255, 128, 64)';
context.fill();
context.lineWidth = 5;
context.stroke();
context.fillStyle = 'rgb(300, 100, 100)';
//fish tail
context.beginPath();
context.moveTo(350, 550);
context.lineTo(375, 525, 575, 350, 550);
context.fillStyle = 'rgb(255, 128, 64)';
context.lineWidth = 5;
context.stroke();
context.beginPath();
context.moveTo(375, 525);
context.lineTo(375, 575);
context.fillStyle = 'rgb(255, 128, 64)';
context.lineWidth = 5;
context.stroke();
context.beginPath();
context.moveTo(375, 575);
context.lineTo(350, 550);
context.fillStyle = 'rgb(255, 128, 64)';
context.lineWidth = 5;
context.stroke();
//hook
context.beginPath();
context.moveTo(150, 500);
context.quadraticCurveTo(150, 550, 175, 525);
context.strokeStyle = 'rgb(250, 250, 250)';
context.lineWidth = 2;
context.stroke();
//Bottom Waves Shape
context.beginPath();
context.moveTo(x, y);
context.lineTo(0,550);
context.quadraticCurveTo(controlX1, controlY1, x1, y1);
context.quadraticCurveTo(controlX2, controlY2, x2, y1);
context.quadraticCurveTo(controlX3, controlY1, x3, y1);
context.quadraticCurveTo(controlX4, controlY2, x4, y1);
context.quadraticCurveTo(controlX5, controlY1, x5, y1);
context.quadraticCurveTo(controlX6, controlY2, x6, y1);
context.quadraticCurveTo(controlX7, controlY1, x7, y1);
context.quadraticCurveTo(controlX8, controlY2, x8, y1);
context.lineTo(850, 605);
context.lineTo(-10,605);
context.fillStyle = 'rgb(75, 75, 200)';
context.fill();
context.strokeStyle = 'rgb(95, 95, 210)';
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>