With the impeccable help from Professor Corrigan, I was able to complete the unimaginably difficult ASCII project. I chose the symbol, Yin Yang, "which is the concept of duality forming a whole. We encounter examples of Yin and Yang every day. As examples: night (Yin) and day (Yang), female (Yin) and male (Yang)." I chose this symbol because it was complex, and incorporated curves and custom shapes that took priority over primitive shapes. As accomplished as I feel to have completed this challenging project and have an image come forth from a written code, I am glad to be moving forward to Photo Shop.
;)
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
//Large Circle
var centerX = 400;
var centerY = 300;
var radius = 250;
//Ying
var startX = 450;
var startY = 55;
var controlX = 540;
var controlY = 80;
var endX = 540;
var endY = 150;
var controlX1 = 540;
var controlY1 = 240;
var endX1 = 450;
var endY1 = 250;
var controlX2 = 310;
var controlY2 = 250;
var endX2 = 300;
var endY2 = 400;
var controlX3 = 310;
var controlY3 = 520;
var endX3 = 450;
var endY3 = 545;
var controlX4 = 300;
var controlY4 = 575;
var endX4 = 200;
var endY4 = 450;
var controlX5 = 100;
var controlY5 = 300;
var endX5 = 200;
var endY5 = 150;
var controlX6 = 300;
var controlY6 = 30;
//Small Top Circle
var centerX2 = 400;
var centerY2 = 150;
var radius2 = 25;
//Small Bottom Circle
var centerX3 = 400;
var centerY3 = 450;
var radius3 = 25;
//Large Circle - Body of Yingyang Sign
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'white';
context.fill();
context.strokeStyle = 'black';
context.stroke();
//Ying
context.beginPath();
context.moveTo(startX, startY);
context.quadraticCurveTo(controlX, controlY, endX, endY);
context.quadraticCurveTo(controlX1, controlY1, endX1, endY1);
context.quadraticCurveTo(controlX2, controlY2, endX2, endY2);
context.quadraticCurveTo(controlX3, controlY3, endX3, endY3);
context.quadraticCurveTo(controlX4, controlY4, endX4, endY4);
context.quadraticCurveTo(controlX5, controlY5, endX5, endY5);
context.quadraticCurveTo(controlX6, controlY6, startX, startY);
context.fillStyle = 'black';
context.fill();
context.stroke();
//Small top circle
context.beginPath();
context.arc(centerX2, centerY2, radius2, 0, 2 * Math.PI, false);
context.fillStyle = 'white';
context.fill();
context.strokeStyle = 'black';
context.stroke();
//Small bottom circle
context.beginPath();
context.arc(centerX3, centerY3, radius3, 0, 2 * Math.PI, false);
context.fillStyle = 'black';
context.fill();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
