For my code logo, I decided to code something other than a logo. I love South Park, they're also just circles, and I wanted to give myself a challenge, so I decided to code Kenny. It took me about 3-4 hours to complete and about 52 lines of code, which is posted below. If I had to code again, I would totally do it. I love working on something and seeing the finished product. Code is tricky and annoying to work with, but the finished product is worth the time it takes to create it.
Below is all the lines of code required to complete Kenny:
<!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(280, 505);
context.lineTo(280, 560);
context.lineTo(518, 560);
context.lineTo(518, 505);
context.fillStyle = 'rgb(241, 87, 13)';
context.fill();
context.lineWidth = '3';
context.stroke();
context.beginPath();
context.moveTo(270, 360)
context.lineTo(213, 408);
context.lineTo(240, 449);
context.lineTo(260, 428);
context.lineTo(255, 507);
context.quadraticCurveTo(377, 573, 538, 510);
context.lineTo(528, 428);
context.lineTo(560, 450);
context.lineTo(580, 410);
context.lineTo(520, 363);
context.lineTo(270, 360);
context.comppletePath;
context.fillStyle = 'rgb(241, 87, 13)';
context.fill();
context.lineWidth = '3';
context.stroke();
context.beginPath();
context.arc(400, 225, 200, 0, 2*Math.PI, false);
context.fillStyle = 'rgb(241, 87, 13)';
context.fill();
context.lineWidth = '3';
context.stroke();
context.beginPath();
context.moveTo(400, 120);
context.quadraticCurveTo(530, 125, 535, 235);
context.quadraticCurveTo(535, 353, 400, 365);
context.quadraticCurveTo(275, 360, 263, 240);
context.quadraticCurveTo(263, 124, 400, 120 );
context.completePath;
context.lineWidth = '2.75';
context.stroke();
context.beginPath();
context.moveTo(400,120);
context.quadraticCurveTo(495, 120, 505, 230);
context.quadraticCurveTo(505, 335, 400, 340);
context.quadraticCurveTo(295, 330, 287,240);
context.quadraticCurveTo(286, 125, 400, 120);
context.completePath;
context.fillStyle = 'rgb(106, 57, 42)';
context.fill();
context.beginPath();
context.moveTo(400,120);
context.quadraticCurveTo(475, 153, 475, 225);
context.quadraticCurveTo(477, 296, 400, 340);
context.quadraticCurveTo(320, 301, 320,225);
context.quadraticCurveTo(320, 150, 400, 120);
context.completePath;
context.fillStyle = 'rgb(240, 208, 170)';
context.fill();
context.beginPath();
context.moveTo(342, 160);
context.quadraticCurveTo(400, 156, 397, 215);
context.quadraticCurveTo(398, 264, 328, 270);
context.quadraticCurveTo(320, 248, 320, 220);
context.quadraticCurveTo(325, 178, 342, 160);
context.completePath;
context.fillStyle = 'white';
context.fill();
context.beginPath();
context.moveTo(461, 173);
context.quadraticCurveTo(476, 188, 475, 228);
context.quadraticCurveTo(473, 265, 462, 280);
context.quadraticCurveTo(390, 276, 398, 215);
context.quadraticCurveTo(405, 155, 461, 173);
context.completePath;
context.fillStyle = 'white';
context.fill();
context.beginPath();
context.arc(428, 220, 5, 0, 2*Math.PI, false);
context.fillStyle = 'black';
context.fill();
context.beginPath();
context.arc(363, 220, 5, 0, 2*Math.PI, false);
context.fillStyle = 'black';
context.fill();
context.beginPath();
context.moveTo(315, 152);
context.lineTo(360, 128);
context.lineWidth = '6';
context.stroke();
context.beginPath();
context.moveTo(425, 128);
context.lineTo(475, 153);
context.lineWidth = '6';
context.stroke();
context.beginPath();
context.moveTo(215, 405)
context.quadraticCurveTo(238, 415, 245, 445);
context.quadraticCurveTo(230, 470, 210, 474);
context.quadraticCurveTo(178, 478, 176, 455);
context.quadraticCurveTo(175, 428, 199, 423);
context.quadraticCurveTo(191, 415, 196, 408);
context.quadraticCurveTo(202, 398, 215, 405);
context.fillStyle = 'rgb(106, 57, 42)';
context.fill();
context.beginPath();
context.moveTo(555, 450)
context.quadraticCurveTo(555, 422, 583, 405);
context.quadraticCurveTo(598, 399, 599, 413);
context.quadraticCurveTo(598, 420, 595, 423);
context.quadraticCurveTo(627, 423, 625, 448);
context.quadraticCurveTo(625, 470, 595, 473);
context.quadraticCurveTo(573, 472,555, 448);
context.fillStyle = 'rgb(106, 57, 42)';
context.fill();
context.beginPath();
context.moveTo(400, 340);
context.quadraticCurveTo(393, 348, 393, 370);
context.quadraticCurveTo(393, 388, 383, 395);
context.lineWidth = '5';
context.stroke();
context.beginPath();
context.moveTo(400, 340);
context.quadraticCurveTo(405, 335, 405, 363);
context.quadraticCurveTo(403, 398, 415, 405);
context.lineWidth = '5';
context.stroke();
context.beginPath();
context.moveTo(280, 553);
context.lineTo(520, 553);
context.quadraticCurveTo(525, 554, 525, 558);
context.quadraticCurveTo(525, 562, 520, 565);
context.lineTo(280 , 565);
context.quadraticCurveTo(275, 562, 275, 560);
context.quadraticCurveTo(275, 554, 280, 553);
context.completePath;
context.fillStyle = 'black';
context.fill();
context.beginPath();
context.moveTo(400, 425);
context.lineTo(400, 540);
context.lineWidth = '4';
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
No comments:
Post a Comment