This project was definitely a learning experience which I found to be difficult. Although it was interesting learning coding, it was very time consuming. I used many rectangle codes, which allowed me to make squares on my project which made up most of it. By understanding the code a little better throughout the project, it became easier to navigate and place object at the right x and y coordinates.I believe this project was successful but definitely could have had more detail to it. I thought it was interesting how I was able to make a sunset reflect off of the windows in the piece. Here is the code to this project:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
<strong>
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
var x=200;
var y=50;
var width = 300
var height= 500;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 2;
//context.fillStyle = 'rgb(0,255,0)';
context.strokeStyle = 'rgb(0,0,100)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
// starting color
grd.addColorStop(0, "rgb(173,216,230)");
//intermediate color
grd.addColorStop(0.5, "rgb(173,216,230)");
// ending color
grd.addColorStop(1, "rgb(241,179,33)");
context.fillStyle = grd;
context.fill();
context.fill();
context.stroke();
//context.rect(x, y, width, height); // top left corner x and y coordinates, width and height
// for a square width = height , the width and the height have the same value
var centerX = canvas.width / 2.1;
var centerY = canvas.height / 6;
var radius = 45;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
//context.fillStyle = "red";
var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 50);
grd.addColorStop(0, "rgb(255, 216, 1)");
grd.addColorStop(1, "rgb(255, 216, 1)");
context.fillStyle = grd; // add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
// starting color
grd.addColorStop(0, "rgb(250,237,61)");
//intermediate color
grd.addColorStop(0.5, "rgb(255,158,54)");
// ending color
grd.addColorStop(1, "rgb(255,132,0)");
context.fillStyle = grd;
context.fill();
context.lineWidth = 3;
// x and y coordinates of the tracing circle
var circlecenterX = canvas.width / 2; // x coordinate
var circlecenterY = canvas.height / 2; // y coordinate
// radius of the tracing circle
var radius = 300;
// Math.PI is HALF the circle, 2*Math.PI is the full circle
// use a number between 0 and 2 to declare the starting and ending angle
var startAngle = 1.1 * Math.PI;
var endAngle = 1.9 * Math.PI;
// draw the arc clockwise or counterclockwise
var counterClockwise = false; // if set to true it draws the complimentary arc
// draw the arc
//context.arc(circlecenterX, circlecenterY, radius, startAngle, endAngle, counterClockwise);
var x=300;
var y=328;
var width = 100
var height= 220;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 2;
//context.fillStyle = 'rgb(0,255,0)';
context.strokeStyle = 'rgb(140,85,85)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
// starting color
grd.addColorStop(0, "rgb(140,85,85)");
//intermediate color
grd.addColorStop(0.5, "rgb(140,85,85)");
// ending color
grd.addColorStop(1, "rgb(140,85,85)");
context.fillStyle = grd;
context.fill();
context.fill();
context.stroke();
var x=337;
var y=500;
var width = 30
var height= 50;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 2;
//context.fillStyle = 'rgb(0,255,0)';
context.strokeStyle = 'rgb(99,63,63)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
// starting color
grd.addColorStop(0, "rgb(99,63,63)");
//intermediate color
grd.addColorStop(0.5, "rgb(99,63,63)");
// ending color
grd.addColorStop(1, "rgb(99,63,63)");
context.fillStyle = grd;
context.fill();
context.fill();
context.stroke();
//context.rect(x, y, width, height); // top left corner x and y coordinates, width and height
// for a square width = height , the width and the height have the same value
//context.rect(x, y, width, height); // top left corner x and y coordinates, width and height
// for a square width = height , the width and the height have the same value
var centerX = canvas.width / 1.67;
var centerY = canvas.height / 1.52;
var radius = 1;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
//context.fillStyle = "red";
var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 50);
grd.addColorStop(0, "rgb(0,0,0)");
grd.addColorStop(1, "rgb(255,0,0)");
context.fillStyle = grd;
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
var x=310;
var y=350;
var width = 25
var height= 25;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = .5;
//context.fillStyle = 'rgb(0,255,0)';
context.strokeStyle = 'rgb(202,140,140)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
// starting color
grd.addColorStop(0, "rgb(202,140,140)");
//intermediate color
grd.addColorStop(0.5, "rgb(202,140,140)");
// ending color
grd.addColorStop(1, "rgb(1202,140,140)");
context.fillStyle = grd;
context.fill();
context.fill();
context.stroke();
//context.rect(x, y, width, height); // top left corner x and y coordinates, width and height
// for a square width = height , the width and the height have the same value
var x=360;
var y=350;
var width = 25
var height= 25;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = .5;
//context.fillStyle = 'rgb(0,255,0)';
context.strokeStyle = 'rgb(202,140,140)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
// starting color
grd.addColorStop(0, "rgb(202,140,140)");
//intermediate color
grd.addColorStop(0.5, "rgb(202,140,140)");
// ending color
grd.addColorStop(1, "rgb(1202,140,140)");
context.fillStyle = grd;
context.fill();
context.fill();
context.stroke();
//context.rect(x, y, width, height); // top left corner x and y coordinates, width and height
// for a square width = height , the width and the height have the same value
var x=310;
var y=400;
var width = 25
var height= 25;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = .5;
//context.fillStyle = 'rgb(0,255,0)';
context.strokeStyle = 'rgb(202,140,140)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
// starting color
grd.addColorStop(0, "rgb(202,140,140)");
//intermediate color
grd.addColorStop(0.5, "rgb(202,140,140)");
// ending color
grd.addColorStop(1, "rgb(1202,140,140)");
context.fillStyle = grd;
context.fill();
context.fill();
context.stroke();
//context.rect(x, y, width, height); // top left corner x and y coordinates, width and height
// for a square width = height , the width and the height have the same value
var x=310;
var y=450;
var width = 25
var height= 25;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = .5;
//context.fillStyle = 'rgb(0,255,0)';
context.strokeStyle = 'rgb(202,140,140)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
// starting color
grd.addColorStop(0, "rgb(202,140,140)");
//intermediate color
grd.addColorStop(0.5, "rgb(202,140,140)");
// ending color
grd.addColorStop(1, "rgb(1202,140,140)");
context.fillStyle = grd;
context.fill();
context.fill();
context.stroke();
//context.rect(x, y, width, height); // top left corner x and y coordinates, width and height
// for a square width = height , the width and the height have the same value
var x=360;
var y=400;
var width = 25
var height= 25;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = .5;
//context.fillStyle = 'rgb(0,255,0)';
context.strokeStyle = 'rgb(202,140,140)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
// starting color
grd.addColorStop(0, "rgb(202,140,140)");
//intermediate color
grd.addColorStop(0.5, "rgb(202,140,140)");
// ending color
grd.addColorStop(1, "rgb(1202,140,140)");
context.fillStyle = grd;
context.fill();
context.fill();
context.stroke();
//context.rect(x, y, width, height); // top left corner x and y coordinates, width and height
// for a square width = height , the width and the height have the same value
var x=360;
var y=450;
var width = 25
var height= 25;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = .5;
//context.fillStyle = 'rgb(0,255,0)';
context.strokeStyle = 'rgb(202,140,140)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
// starting color
grd.addColorStop(0, "rgb(202,140,140)");
//intermediate color
grd.addColorStop(0.5, "rgb(202,140,140)");
// ending color
grd.addColorStop(1, "rgb(1202,140,140)");
context.fillStyle = grd;
context.fill();
context.fill();
context.stroke();
//context.rect(x, y, width, height); // top left corner x and y coordinates, width and height
// for a square width = height , the width and the height have the same value
var x=200;
var y=494;
var width = 99
var height= 55;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 2;
//context.fillStyle = 'rgb(0,255,0)';
context.strokeStyle = 'rgb(95,58,58)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
// starting color
grd.addColorStop(0, "rgb(95,58,58)");
//intermediate color
grd.addColorStop(0.5, "rgb(95,58,58)");
// ending color
grd.addColorStop(1, "rgb(95,58,58)");
context.fillStyle = grd;
context.fill();
context.fill();
context.stroke();
var x=235;
var y=510;
var width = 30
var height= 40;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 2;
//context.fillStyle = 'rgb(0,255,0)';
context.strokeStyle = 'rgb(206,154,154)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
// starting color
grd.addColorStop(0, "rgb(206,154,154)");
//intermediate color
grd.addColorStop(0.5, "rgb(206,154,154)");
// ending color
grd.addColorStop(1, "rgb(206,154,154)");
context.fillStyle = grd;
context.fill();
context.fill();
context.stroke();
var centerX = canvas.width / 2.5;
var centerY = canvas.height / 1.5;
var radius = 1.5;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
//context.fillStyle = "red";
var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, .5);
grd.addColorStop(0, "rgb(0,0,0)");
grd.addColorStop(1, "rgb(0,0,0)");
context.fillStyle = grd;
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
var centerX = canvas.width /2.33;
var centerY = canvas.height / 1.5;
var radius = 1.5;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
//context.fillStyle = "red";
var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, .5);
grd.addColorStop(0, "rgb(0,0,0)");
grd.addColorStop(1, "rgb(0,0,0)");
context.fillStyle = grd;
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
//line
var x1 = 249;
var y1 = 550;
var x2 = 249;
var y2 = 510;
context.beginPath();
context.moveTo(x1,y1);
context.lineTo(x2,y2);
//Thickness
context.lineWidth = 1;
//Colors
context.strokeStyle = 'rgba(0,0,0,)';
//Rounding
context.lineCap = 'round';
context.stroke();
// begin custom shape
context.beginPath();
context.moveTo(350, 170);
context.bezierCurveTo(425, 150, 265, 250, 400, 185);
context.bezierCurveTo(475, 190, 450, 190, 450, 185);
context.bezierCurveTo(560, 175, 380, 160, 470, 160);
context.bezierCurveTo(550, 102.5, 375, 110, 385, 150);
// complete custom shape
context.fillStyle = "rgb(241, 245,255)";
context.fill();
context.closePath();
context.lineWidth = 5;
context.beginPath();
context.moveTo(250, 400);
context.lineTo(300, 493);
context.lineTo(200, 493);
context.lineTo(250, 400);
context.lineWidth = 2;
context.fillStyle = "rgb(132,98,59)";
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
// starting color
grd.addColorStop(0, "rgb(174,132,85)");
//intermediate color
grd.addColorStop(0.5, "rgb(229,186,137)");
// ending color
grd.addColorStop(1, "rgb(174,132,85)");
context.fillStyle = grd;
context.fill();
context.fill();
context.closePath();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="600" height="800"></canvas>
</body>
</html></strong>
