I think the most difficult aspect of this assignment was the numbers and math involved with first choosing the right points on the graph and then transferring that to the actual coding, where you will have to do more math to make changes and make shapes look smoother/ more accurate.
The triangles were difficult for me because it took a lot of messing with numbers for it to make like each separate triangle belonged together as part of a circle. I used a quadratic curve on each side of all 4 triangles. Additionally, getting the gradient in the black circle to look like the original was quite difficult for me.
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
///////////////////////////////////// start below this line ~~~~~~~~~~~~~
var centerX = 400;
var centerY = 300;
var radius = 150;
var startX = 180;
var startY = 300;
var endX = 550;
var endY = 500;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2*Math.PI, false);
var grd = context.createLinearGradient(startX, startY, endX, endY);
grd.addColorStop(0,'rgb(250, 250, 250)');
grd.addColorStop(.3,'rgb(0, 0, 0)');
context.fillStyle = grd;
context.fill();
context.lineWidth = 8;
context.strokeStyle = 'rgb(210, 210, 210)';
context.closePath();
context.stroke();
var controlX = 310;
var controlY = 210;
var endX = 400;
var endY = 200;
context.beginPath();
context.moveTo(400,300);
context.lineTo(300,300);
context.quadraticCurveTo(controlX, controlY, endX, endY);
context.lineTo(400,300);
context.lineWidth = 2.25;
context.fillStyle = 'rgb(0, 200, 245)';
context.fill();
context.closePath();
context.strokeStyle = 'rgb(0, 0, 0)';
context.stroke();
var controlX = 490;
var controlY = 210;
var endX = 500;
var endY = 300;
context.beginPath();
context.moveTo(400,300);
context.lineTo(400,200);
context.quadraticCurveTo(controlX, controlY, endX, endY);
context.lineTo(400,300);
context.lineWidth = 2.25;
context.fillStyle = 'rgb(250, 250, 250)';
context.fill();
context.closePath();
context.strokeStyle = 'rgb(0, 0, 0)';
context.stroke();
var controlX = 490;
var controlY = 390;
var endX = 400;
var endY = 400;
context.beginPath();
context.moveTo(400,300);
context.lineTo(500,300);
context.quadraticCurveTo(controlX, controlY, endX, endY);
context.lineTo(400,300);
context.lineWidth = 2.25;
context.fillStyle = 'rgb(0, 200, 250)';
context.fill();
context.closePath();
context.strokeStyle = 'rgb(0, 0, 0)';
context.stroke();
var controlX = 310;
var controlY = 390;
var endX = 300;
var endY = 300;
context.beginPath();
context.moveTo(400,300);
context.lineTo(400,400);
context.quadraticCurveTo(controlX, controlY, endX, endY);
context.lineTo(400,300);
context.lineWidth = 2.25;
context.fillStyle = 'rgb(250, 250, 250)';
context.fill();
context.closePath();
context.strokeStyle = 'rgb(0, 0, 0)';
context.stroke();
var controlX1 = 310;
var controlY2 = 190;
var controlX2 = 340;
var controlY2 = 190;
var endX = 300;
var endY = 250;
context.beginPath();
context.moveTo(300,250);
context.lineTo(275,210);
context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY);
context.lineWidth = 2.25;
context.closePath();
context.strokeStyle = 'rgb(210, 210, 210)';
context.stroke();
//////////////////////////////////// end above this line ~~~~~~~~~~~~~~
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
