Monday, October 24, 2016

Simpson Code

 This is my coding homework. I made Homer's shirt off white so that it is able to tell it is colored.

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ

context.beginPath();
context.moveTo(443, 115);
context.quadraticCurveTo(420, 20, 325, 48);
context.quadraticCurveTo(230, 87, 295, 200);
context.quadraticCurveTo(333, 265, 330, 355);
context.lineTo(449, 435);
context.lineTo(450, 372);
context.quadraticCurveTo(437, 365, 437, 333);
context.lineTo(450, 220);
context.quadraticCurveTo(457, 205, 448, 195);
context.lineTo(445, 135);
context.quadraticCurveTo(453, 125, 443, 115);
context.closePath();
context.fillStyle = 'rgb(252, 217, 1)';
context.fill();
context.lineWidth = 1.5;
context.stroke();

context.beginPath();
context.moveTo(325, 245);
context.quadraticCurveTo(301, 238, 304, 265);
context.quadraticCurveTo(307, 280, 328, 280);
context.fillStyle = 'rgb(252, 217, 1)';
context.fill();
context.stroke();
context.beginPath();
context.moveTo(321, 260)
context.quadraticCurveTo(313, 250, 309, 262);
context.stroke();
context.beginPath();
context.moveTo(317, 270)
context.quadraticCurveTo(310, 268, 316, 255);
context.stroke();

context.beginPath();
context.moveTo(357, 43);
context.bezierCurveTo(326, 2, 287, 52, 303, 83);
context.stroke();
context.beginPath();
context.moveTo(328, 48);
context.bezierCurveTo(300, 20, 262, 62, 290, 100);
context.stroke();
context.beginPath();
context.moveTo(295, 243);
context.lineTo(290, 210); 
context.lineTo(310, 227);
context.lineTo(311, 192);
context.lineTo(327, 221);
context.stroke();

context.beginPath();
context.moveTo(427, 212)
context.quadraticCurveTo(470, 218, 475, 262);
context.quadraticCurveTo(485, 270, 478, 283);
context.quadraticCurveTo(470, 297, 455, 298);
context.quadraticCurveTo(462, 311, 445, 318);
context.quadraticCurveTo(440, 350, 400, 350);
context.quadraticCurveTo(350, 350, 337, 300);
context.quadraticCurveTo(330, 263, 370, 234);
context.quadraticCurveTo(382, 227, 400, 225);
context.lineTo(427, 212);
context.closePath();
context.fillStyle = 'rgb(208, 174, 104)';
context.fill();
context.stroke();

context.beginPath();
context.moveTo(350, 299)
context.quadraticCurveTo(397, 318, 455, 298);
context.stroke();

context.beginPath();
context.moveTo(352,292);
context.quadraticCurveTo(348, 298, 350, 305);
context.stroke();

context.beginPath(); 
context.arc(425, 166, 35, 0, 2*Math.PI, false);
context.fillStyle = 'rgb(250, 250, 250';
context.fill();
context.stroke();

context.beginPath();
context.arc(367, 180, 35, 0, 2*Math.PI, false);
context.fillStyle = 'rgb(250, 250, 250';
context.fill();
context.stroke();

context.beginPath();
context.arc(435, 165, 5, 0, 2*Math.PI, false);
context.fillStyle = 'rgb(0, 0, 0)';
context.fill();
context.stroke();

context.beginPath();
context.arc(361, 187, 5, 0, 2*Math.PI, false);
context.fillStyle = 'rgb(0, 0, 0)';
context.fill();
context.stroke();

context.beginPath();
context.moveTo(400, 195);
context.bezierCurveTo(398, 202, 430, 174, 442, 201);
context.quadraticCurveTo(445, 223, 420, 224);
context.quadraticCurveTo(400, 226, 397, 225);
context.fillStyle = 'rgb(252, 217, 1)';
context.fill();
context.stroke();

context.beginPath();
context.moveTo(438, 343);
context.quadraticCurveTo(455, 343, 458, 350);
context.quadraticCurveTo(465, 363, 467, 370);
context.quadraticCurveTo(529, 395, 534, 420);
context.lineTo(563, 558);
context.quadraticCurveTo(580, 586, 582, 601); 
context.lineTo(258, 601);
context.quadraticCurveTo(262, 555, 281, 524);
context.quadraticCurveTo(230, 420, 307, 397);
context.quadraticCurveTo(309, 358, 320, 350);
context.quadraticCurveTo(324, 347, 330, 347);
context.lineTo(330, 355);
context.quadraticCurveTo(364, 367, 399, 367);
context.bezierCurveTo(403, 367, 430, 410, 432, 410);
context.lineTo(451, 371);
context.quadraticCurveTo(437, 365, 437, 343);
context.closePath();
context.fillStyle = 'rgb(235, 239, 240';
context.fill();
context.stroke();

context.beginPath();
context.moveTo(330, 355);
context.quadraticCurveTo(324, 353, 321, 350);
context.stroke();

context.beginPath();
context.moveTo(398, 367);
context.lineTo(381, 412);
context.stroke();

context.beginPath();
context.moveTo(317, 540);
context.quadraticCurveTo(303, 525, 304, 523);
context.quadraticCurveTo(300, 536, 302, 543);
context.quadraticCurveTo(312, 548, 317, 540);
context.closePath();
context.stroke();

context.beginPath();
context.moveTo(281, 524);
context.quadraticCurveTo(291, 538, 302, 543);
context.stroke();

context.beginPath();
context.moveTo(481, 428);
context.quadraticCurveTo(465, 390, 451, 371);
context.quadraticCurveTo(456, 346, 457, 347.5);
context.stroke();

context.beginPath();
context.moveTo(467, 370);
context.quadraticCurveTo(475, 389, 475, 392);
context.lineTo(464, 392);
context.stroke();

context.beginPath();
context.moveTo(307, 397);
context.quadraticCurveTo(332, 394, 352, 413)
context.stroke();
context.beginPath();
context.moveTo(525, 414);
context.quadraticCurveTo(628, 487, 563, 557);
context.quadraticCurveTo(527, 583, 471, 540);
context.quadraticCurveTo(449, 601, 395, 592);
context.quadraticCurveTo(326, 574, 304, 523);
context.quadraticCurveTo(323, 461, 361, 447);
context.lineTo(362,443);
context.quadraticCurveTo(350, 445, 343, 434);
context.bezierCurveTo(336, 424, 358, 390, 390, 420);
context.quadraticCurveTo(407, 424, 408, 435);
context.quadraticCurveTo(429, 443, 418, 458);
context.quadraticCurveTo(412, 459, 415, 461);
context.bezierCurveTo(424, 461, 447, 413, 480, 425);
context.lineTo(485, 428);
context.quadraticCurveTo(511, 409, 525, 414);
context.closePath();
context.fillStyle = 'rgb(252, 217, 1)';
context.fill();
context.stroke();

context.beginPath();
context.moveTo(390, 420);
context.quadraticCurveTo(366, 421, 362, 443);
context.fillStyle = 'rgb(252, 217, 1)';
context.fill();
context.stroke();

context.beginPath();
context.moveTo(408, 435);
context.quadraticCurveTo(387, 437, 385, 460);
context.quadraticCurveTo(363, 463, 361, 447);
context.stroke();

context.beginPath();
context.moveTo(385, 460);
context.bezierCurveTo(399, 487, 409, 457, 414, 459);
context.stroke();

context.beginPath();
context.moveTo(485, 428);
context.quadraticCurveTo(506, 440, 513, 462);
context.bezierCurveTo(490, 475, 478, 524, 471, 540);
context.stroke();

context.beginPath();
context.moveTo(513, 462);
context.quadraticCurveTo(520, 457, 521, 458);
context.stroke();

////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ

};

</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>

No comments:

Post a Comment