My final for the canvas project is an ocean scene. I was trying to figure out things that I could create and when I was driving past Bayshore is when I got my idea. My project is made out of several shapes and colors. I really tried to give the water some dimension and that is why there are so many lines and a variety of color. This was the hardest thing I have ever done. Even creating a simple boat was harder than I was expecting. It took me so long and I tried my hardest to give it a more realistic view, but I honestly did not know how. I am happy with my background as simple as it is along with the base of my boat. I am so glad this is done. I did learn a lot about the software and coding in general, but I am happy to never do this again.
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
//backckground
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.rect(0, 0, canvas.width, canvas.height);
// radial gradient
var grd = context.createRadialGradient(200, 57, 15, 238, 50, 310);
grd.addColorStop(0, 'rgb(250, 252, 137 )');
grd.addColorStop(.27, 'rgb(255, 255, 128)');
grd.addColorStop(1, 'rgb(122, 203, 250)');
context.fillStyle = grd;
context.fill();
// starting point coordinates Wave 1
var startX = 0;
var startY = canvas.height/1.1;
// control point 1 coordinates ( magnet )
var cpointX1 = canvas.width / 300;
var cpointY1 = canvas.height / 1.5 + 300;
// control point 2 coordinates ( magnet )
var cpointX2 = canvas.width * 1;
var cpointY2 = canvas.height / 2-3;
// ending point coordinates
var endX = canvas.width;
var endY = canvas.height/.9;
context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);
context.lineWidth = 20;
context.strokeStyle = "rgb(0,155,255)";
context.fillStyle = 'rgb(25,25,112 )';
context.fill();
context.stroke();
// Wave 2
var startX = 0;
var startY = canvas.height/1;
// control point 1 coordinates ( magnet )
var cpointX1 = canvas.width / 2;
var cpointY1 = canvas.height / 1.5 +10;
// control point 2 coordinates ( magnet )
var cpointX2 = canvas.width * 1;
var cpointY2 = canvas.height / .9;
//wave
var endX = canvas.width;
var endY = canvas.height/1;
context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);
context.lineWidth = 20;
context.strokeStyle = "rgb(2, 68, 164 )";
context.fillStyle = 'rgb(25,25,112 )';
context.fill();
context.stroke();
// wave 3
var startX = 0;
var startY = canvas.height/1.1;
// control point 1 coordinates ( magnet )
var cpointX1 = canvas.width / 8;
var cpointY1 = canvas.height / 2 + 300;
// control point 2 coordinates ( magnet )
var cpointX2 = canvas.width * 3/4;
var cpointY2 = canvas.height / 2-3;
// ending point coordinates
var endX = canvas.width;
var endY = canvas.height/.95;
context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointY2, cpointY2, endX, endY);
context.lineWidth = 17;
context.strokeStyle = "rgb(2, 68, 164 )"
context.fillStyle = 'rgb(25,25,112 )';
context.fill();
context.stroke();
//wave 4
var endX = canvas.width;
var endY = canvas.height/1;
context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);
context.lineWidth = 20;
context.strokeStyle = "rgb(0,155,255)";
context.fillStyle = 'rgb(25,25,112 )';
context.fill();
context.stroke();
// wave 5
var startX = 0;
var startY = canvas.height/1.23;
// control point coordinates ( magnet )
var cpointX = canvas.width / 3.5;
var cpointY = canvas.height / 1.7 + 345;
// ending point coordinates
var endX = canvas.width;
var endY = canvas.height/.077;
context.beginPath();
context.moveTo(startX, startY);
context.quadraticCurveTo(cpointX, cpointY, endY, endX);
context.lineWidth = 10;
context.strokeStyle = "rgb(2, 68, 164 )";
context.fillStyle = 'rgb(25,25,112 )';
context.fill();
context.stroke();
//wave 6
var startX = 0;
var startY = canvas.height/1;
// control point 1 coordinates ( magnet )
var cpointX1 = canvas.width / 5;
var cpointY1 = canvas.height / 1.8 + 300;
// control point 2 coordinates ( magnet )
var cpointX2 = canvas.width * 3/4;
var cpointY2 = canvas.height / 2-3;
// ending point coordinates
var endX = canvas.width;
var endY = canvas.height/.90;
context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointY2, cpointY2, endX, endY);
context.lineWidth = 17;
context.strokeStyle = "rgb(51, 133, 255)";
context.fillStyle = 'rgb(25,25,112 )';
context.fill();
context.stroke();
// wave 7
var startX = 0;
var startY = canvas.height/1.32;
// control point 1 coordinates ( magnet )
var cpointX1 = canvas.width / 5;
var cpointY1 = canvas.height / 1.5 + 300;
// control point 2 coordinates ( magnet )
var cpointX2 = canvas.width * 1;
var cpointY2 = canvas.height / 2 - 3;
// ending point coordinates
var endX = canvas.width;
var endY = canvas.height/1;
context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);
context.lineWidth = 15;
context.strokeStyle = "rgb(70,130,180)";
context.fillStyle = 'rgb(25,25,112 )';
context.fill();
context.stroke();
// wave 8
var startX = 0;
var startY = canvas.height/1.2;
// control point 1 coordinates ( magnet )
var cpointX1 = canvas.width / 3;
var cpointY1 = canvas.height / 1 + 10;
// control point 2 coordinates ( magnet )
var cpointX2 = canvas.width * 3/4;
var cpointY2 = canvas.height /1;
// ending point coordinates
var endX = canvas.width;
var endY = canvas.height/1.2;
context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);
context.lineWidth = 24;
context.strokeStyle = "rgb(2, 68, 164 )";
context.fillStyle = 'rgb(25,25,112 )';
context.fill();
context.stroke();
//wave 9
var endX = canvas.width;
var endY = canvas.height/1;
context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);
context.lineWidth = 18;
context.strokeStyle = "rgb(0,155,255)";
context.fillStyle = 'rgb(25,25,112 )';
context.fill();
context.stroke();
//WAVE 10
var startX = 0;
var startY = canvas.height/.98;
// control point 1 coordinates ( magnet )
var cpointX1 = canvas.width / 2;
var cpointY1 = canvas.height / 1.5 + 300;
// control point 2 coordinates ( magnet )
var cpointX2 = canvas.width * 1;
var cpointY2 = canvas.height / 2-3;
// ending point coordinates
var endX = canvas.width;
var endY = canvas.height/.9;
context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);
context.lineWidth = 15;
context.strokeStyle = "rgb( 2, 68, 164 )";
context.stroke();
//wave 11
var endX = canvas.width;
var endY = canvas.height/1;
context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);
context.lineWidth = 18;
context.strokeStyle = "rgb(0,155,255)";
context.fillStyle = 'rgb(25,25,112 )';
context.fill();
context.stroke();
//wave 12
var startX = 0;
var startY = canvas.height/1;
// control point 1 coordinates ( magnet )
var cpointX1 = canvas.width / 3;
var cpointY1 = canvas.height / 1.5 + 300;
// control point 2 coordinates ( magnet )
var cpointX2 = canvas.width * 1;
var cpointY2 = canvas.height / 2-3;
// ending point coordinates
var endX = canvas.width;
var endY = canvas.height/.9;
context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);
context.lineWidth = 10;
context.strokeStyle = "rgb(2, 68, 164)";
context.stroke();
//Wave 13
var startX = 0;
var startY = canvas.height/1;
// control point 1 coordinates ( magnet )
var cpointX1 = canvas.width / 4;
var cpointY1 = canvas.height / 1.5 + 300;
// control point 2 coordinates ( magnet )
var cpointX2 = canvas.width * 1;
var cpointY2 = canvas.height / 2-3;
// ending point coordinates
var endX = canvas.width;
var endY = canvas.height/1;
context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);
context.lineWidth = 15;
context.strokeStyle = "rgb(51, 133, 255)";
context.stroke();
//wave 14
var startX = 0;
var startY = canvas.height/1.4;
// control point 1 coordinates ( magnet )
var cpointX1 = canvas.width / 4;
var cpointY1 = canvas.height / 1.5 + 300;
// control point 2 coordinates ( magnet )
var cpointX2 = canvas.width * 1;
var cpointY2 = canvas.height / 2 - 3;
// ending point coordinates
var endX = canvas.width;
var endY = canvas.height/1;
context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);
context.lineWidth = 15;
context.strokeStyle = "rgb(70,130,180)";
context.fillStyle = 'rgb(25,25,112 )';
context.fill();
context.stroke();
//wave 15
var startX = 0;
var startY = canvas.height/1.1;
// control point 1 coordinates ( magnet )
var cpointX1 = canvas.width / 1.6;
var cpointY1 = canvas.height / 1 + 10;
// control point 2 coordinates ( magnet )
var cpointX2 = canvas.width * 3/4;
var cpointY2 = canvas.height /2;
// ending point coordinates
var endX = canvas.width;
var endY = canvas.height/1.2;
//wave 16
var startX = 0;
var startY = canvas.height/1;
// control point 1 coordinates ( magnet )
var cpointX1 = canvas.width / 5;
var cpointY1 = canvas.height / 1.8 + 300;
// control point 2 coordinates ( magnet )
var cpointX2 = canvas.width * 3/4;
var cpointY2 = canvas.height / 2-3;
// ending point coordinates
var endX = canvas.width;
var endY = canvas.height/.90;
context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointY2, cpointY2, endX, endY);
context.lineWidth = 10;
context.strokeStyle = "rgb(51, 133, 255)";
context.stroke();
//// boat base
context.beginPath();
context.arc(canvas.width/2.5, canvas.height/1.8, 200, Math.PI*0.2, Math.PI*0.8, false);
context.lineWidth = 2;
context.lineCap = "round"; // "square" "round" "butt"
context.fillStyle = 'rgb(188, 54, 54 )';
context.fill();
context.stroke();
context.counterclockwise
//boat wood mark middle
context.beginPath();
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.moveTo(187,480);
ctx.lineTo(452,480);
context.strokeStyle = "rgb( 102, 72, 72 )";
ctx.stroke();
// boat lines top
context.beginPath();
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.moveTo(474,460);
ctx.lineTo(170,460);
context.strokeStyle = "rgb( 102, 72, 72 )";
ctx.stroke();
// boat lines 3 3rd
context.beginPath();
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.moveTo(429,500);
ctx.lineTo(213,500);
context.strokeStyle = "rgb( 102, 72, 72 )";
ctx.stroke();
// boat lines 4th
context.beginPath();
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.moveTo(406,511);
ctx.lineTo(231,510);
context.strokeStyle = "rgb( 102, 72, 72 )";
ctx.stroke();
// boat lines 5th
context.beginPath();
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.moveTo(186,470);
ctx.lineTo(460,471);
context.strokeStyle = "rgb( 102, 72, 72 )";
ctx.stroke();
//lines second from bottom
context.beginPath();
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.moveTo(200,490);
ctx.lineTo(446,492);
context.strokeStyle = "rgb( 102, 72, 72 )";
ctx.stroke();
//text
context.beginPath();
context.font='bold 16pt Apple Chancery';
context.fillStyle="rgb(255, 252, 252)";
context.fillText("S.S.",260,500);
context.beginPath();
context.font = 'bold 16pt Apple Chancery';
context.fillText('Madison', 298, 500);
context.beginPath();
context.font= 'italic 25pt Comic Sans MS';
context.closePath();
//diagonal line sail
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.moveTo(323,293);
ctx.lineTo(400,403);
context.strokeStyle = "rgb(188, 54, 54 )";
context.lineWidth = 4;
ctx.stroke();
//bottom of sail
context.beginPath();
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.moveTo(319,400);
ctx.lineTo(401,403);
context.strokeStyle = "rgb( 188, 54, 54 )";
ctx.stroke();
//bottom of sail long
context.beginPath();
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.moveTo(180,400);
ctx.lineTo(400,403);
context.strokeStyle = "rgb(188, 54, 54 )";
ctx.stroke();
//diagonal line sail long
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.moveTo(318,223);
ctx.lineTo(180,400);
context.strokeStyle = "rgb( 188, 54, 54)";
context.lineWidth = 4;
ctx.stroke();
context.beginPath();
// Start from the top-left point.
context.moveTo(319, 220); // give the (x,y) coordinates
context.lineTo(180, 400);
context.lineTo(455, 400);
context.lineTo(320, 291);
context.fill();
context.stroke();
context.closePath();
//vertical line middle
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.moveTo(320,220);
ctx.lineTo(320,480);
context.strokeStyle = "rgb(188, 54, 54 )";
ctx.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
