South Park plays constantly in my dorm on Comedy Central. It has grown on me so much that I have dedicated most of my art to it.
The final canvas idea sprung up after I created Kenny. I thought to myself "If I can make one character, why not make three more!" And that is exactly shat I did. Everything is code except for some of the background and some of the accessories including Stan's and Cartman's Balls on the top of their hat and Cartman's hands. Other than that, it's all code. Believe me! :)
Total Elapsed Time: Around 15 Hours
Difficulty: Hard!
Was it worth it? Hell Yeah
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> Meet Some Friends Of Mine </title>
<style type="text/css">
body,td,th {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color: #f58821;
}
body {
background-image:url(bgfinal.jpg);
background-repeat:no-repeat;
}
#myCanvas { border: rgb(102,0,255) medium dashed; }
</style>
</head>
<body>
<canvas id="myCanvas" width="900" height="550"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.font = 'italic 20pt Calibri';
context.fillText('Meet Some Friends Of Mine', 20, 540);
////KENNY - KENNY - KENNY - KENNY - KENNY
////:::::::::::::::::::::::::::::::::::::
//
//Head
context.beginPath();
var centerXKennyHead = canvas.width / 1.747;
var centerYKennyHead = canvas.height / 1.63;
var radiusHead = 72;
context.beginPath();
context.arc(centerXKennyHead, centerYKennyHead, radiusHead, 0, 2 * Math.PI, false);
context.fillStyle = '#fd6013';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
context.closePath();
//sweatshirt hoodie opening
var centerXKennyHoodie = 38;
var centerYKennyHoodie = 45;
var radiusHoodie = 30;
// save state
context.save();
// translate context
context.translate(canvas.width / 2, canvas.height / 2);
// scale context horizontally
context.scale(1.7, 1.55);
// draw circle which will be stretched into an oval
context.beginPath();
context.arc(centerXKennyHoodie, centerYKennyHoodie, radiusHoodie, 0, 2 * Math.PI, false);
// restore to original state
context.restore();
// apply styling
context.fillStyle = '#fd6013';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
//Sweatshirt Inside
var centerXKennyInside = 0;
var centerYKennyInside = 0;
var radiusKennyInside = 40;
context.save();
context.translate(canvas.width / 1.75, canvas.height / 1.61);
context.scale(1.15, .99);
context.beginPath();
context.arc(centerXKennyInside, centerYKennyInside, radiusKennyInside, 0, 2 * Math.PI, false);
// restore to original state
context.restore();
// apply styling
context.fillStyle = '#724130';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
//Face
context.beginPath();
context.moveTo(515, 380);
context.bezierCurveTo(510, 390, 588,340, 515, 300);
context.bezierCurveTo(510, 308, 448,330, 516, 380);
context.fillStyle="#fbd9b4";
context.fill();
context.lineWidth = 1;
// line color
context.strokeStyle = 'black';
context.stroke();
//Left Eye
var centerXLeftEye = canvas.width / 1.815;
var centerYLeftEye = canvas.height / 1.63;
context.beginPath();
for (var i = 0.7 * Math.PI; i < 1.8 * Math.PI; i += 0.01 ) {
xPos = centerXLeftEye - (18 * Math.sin(i)) * Math.sin(0.7 * Math.PI) + (22 * Math.cos(i)) * Math.cos(0.7 * Math.PI);
yPos = centerYLeftEye + (22 * Math.cos(i)) * Math.sin(0.7 * Math.PI) + (18 * Math.sin(i)) * Math.cos(0.7 * Math.PI);
if (i == 0) {
context.moveTo(xPos, yPos);
} else {
context.lineTo(xPos, yPos);
}
}
context.lineWidth = 2.5;
context.fillStyle="white";
context.strokeStyle = "#232323";
context.bezierCurveTo(475, 340, 490,320,493,319);
context.stroke();
context.fill();
context.closePath();
//Left Eye Pupil
var centerXLeftEyePupil = canvas.width / 1.779;
var centerYLeftEyePupil = canvas.height / 1.695;
var radiusLeftEyePupil = 1.9;
context.beginPath();
context.arc(centerXLeftEyePupil, centerYLeftEyePupil, radiusLeftEyePupil, 0, 2 * Math.PI, false);
context.fillStyle = 'black';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
//Right Eye
var centerXRightEye = canvas.width / 1.69;
var centerYRightEye = canvas.height / 1.629;
context.beginPath();
for (var i = 0.1 * Math.PI; i < 1.4 * Math.PI; i += 0.01 ) {
xPos = centerXRightEye - (18 * Math.sin(i)) * Math.sin(0.23 * Math.PI) + (22 * Math.cos(i)) * Math.cos(0.29 * Math.PI);
yPos = centerYRightEye + (22 * Math.cos(i)) * Math.sin(0.23 * Math.PI) + (18 * Math.sin(i)) * Math.cos(0.23 * Math.PI);
if (i == 0) {
context.moveTo(xPos, yPos);
} else {
context.lineTo(xPos, yPos);
}
}
context.fillStyle="white";
context.lineWidth = 2.5;
context.strokeStyle = "#232323";
context.bezierCurveTo(550, 340, 543,350,543,355);
context.stroke();
context.fill();
context.closePath();
//Right Eye Pupil
var centerXLeftEyePupil = canvas.width / 1.69;
var centerYLeftEyePupil = canvas.height / 1.695;
var radiusLeftEyePupil = 1.9;
context.beginPath();
context.arc(centerXLeftEyePupil, centerYLeftEyePupil, radiusLeftEyePupil, 0, 2 * Math.PI, false);
context.fillStyle = 'black';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
//String
context.beginPath();
context.moveTo(515, 380);
context.bezierCurveTo(510, 410, 503,410,510, 400);
context.bezierCurveTo(510, 390, 518,360, 520, 402);
context.lineWidth = 1;
context.strokeStyle="black";
context.stroke();
context.closePath();
//Torso
context.beginPath();
context.moveTo(465,390);
context.bezierCurveTo(450, 410, 455,420, 459, 442);
context.bezierCurveTo(460, 443, 466,440, 464, 439);
context.bezierCurveTo(510, 450, 548,450, 565, 443);
context.bezierCurveTo(582, 452, 588,430, 577, 427);
context.bezierCurveTo(580, 425, 580,425, 565, 390);
context.bezierCurveTo(525, 415, 505,420, 465, 390);
context.lineWidth=1;
context.fillStyle="#fd6013";
context.fill();
context.strokeStyle="black";
context.stroke();
context.closePath();
//Legs
context.beginPath();
context.moveTo(470,455);
context.lineTo(470,440);
context.bezierCurveTo(550, 455, 565,440, 559, 444);
context.lineTo(558,455);
context.lineTo(470,455);
//context.lineTo(400,400);
context.fillStyle="#fd6013";
context.fill();
context.strokeStyle="black";
context.stroke();
context.closePath();
//Feet
var centerXKennyFeet = 0;
var centerYKennyFeet = 0;
var radiusKennyFeet = 20;
// save state
context.save();
// translate context
context.translate(canvas.width / 1.75, canvas.height / 1.203);
// scale context horizontally
context.scale(2.5, .1);
// draw circle which will be stretched into an oval
context.beginPath();
context.arc(centerXKennyFeet, centerYKennyFeet, radiusKennyFeet, 0, 2 * Math.PI, false);
// restore to original state
context.restore();
// apply styling
context.fillStyle = 'black';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
//Right Thumb
var centerXKennyRightThumb = canvas.width / 1.933;
var centerYKennyRightThumb = canvas.height / 1.282;
var radiusKennyRightThumb = 3.8;
context.beginPath();
context.arc(centerXKennyRightThumb, centerYKennyRightThumb, radiusKennyRightThumb, 0, 2 * Math.PI, false);
context.fillStyle = 'green';
//context.fill();
context.lineWidth = 1;
context.fillStyle="#724130";
context.fill();
context.strokeStyle = 'black';
context.stroke();
context.closePath();
//Right Hand Part 2
var centerXRightHandKenny = canvas.width / 1.575;
var centerYRightHandKenny = canvas.height / 1.265;
var radiusRightHandKenny = 10;
//context.translate(200,400);
//context.rotate(Math.PI/10);
context.beginPath();
context.arc(centerXRightHandKenny, centerYRightHandKenny, radiusRightHandKenny, 0, 2 * Math.PI, false);
context.fillStyle = '#724130';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke();
//Left Thumb
var centerXKennyLeftThumb = canvas.width / 1.6;
var centerYKennyLeftThumb = canvas.height / 1.275;
var radiusKennyLeftThumb = 3.8;
context.beginPath();
context.arc(centerXKennyLeftThumb, centerYKennyLeftThumb, radiusKennyLeftThumb, 0, 2 * Math.PI, false);
context.fillStyle = '#724130';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
context.closePath();
//Right Arm
context.beginPath();
context.moveTo(470,427);
context.bezierCurveTo(460,445,475,420,470,420);
context.stroke();
context.closePath();
//Right Arm pt.2
context.beginPath();
context.moveTo(557,420);
context.bezierCurveTo(560,415,560,430,560,430);
context.stroke();
context.closePath();
//Left Hand Part 2
context.beginPath();
context.moveTo(458,422);
//context.bezierCurveTo(460,445,476,420,455,422);
context.bezierCurveTo(450,425,480,420,460,442);
context.fill();
context.stroke();
context.closePath();
//Zipper
context.beginPath();
context.moveTo(515,410);
context.lineTo(515,447);
context.stroke();
context.closePath();
//
////KENNY END - KENNY END - KENNY END - KENNY END - KENNY END
////:::::::::::::::::::::::::::::::::::::::::::::::::::::::::
//
//
////STAN - STAN - STAN - STAN - STAN - STAN - STAN - STAN -STAN
////:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
//Head
//context.beginPath();
// var centerXStanHead = canvas.width / 2.26;
// var centerYStanHead = canvas.height / 1.63;
// var radiusStanHead = 68;
//
// context.beginPath();
// context.arc(centerXStanHead, centerYStanHead, radiusStanHead, 0, 2 * Math.PI, false);
// context.fillStyle = '#fd6013';
// //context.fill();
// context.lineWidth = 1;
// context.strokeStyle = 'black';
// context.stroke();
// context.closePath();
//Hat Pt. 1
context.beginPath();
context.moveTo(332,315);
context.bezierCurveTo(390,220,460,295,465,321);
context.stroke();
context.fillStyle="#5062a2";
context.fill();
context.closePath();
//Hat pt.2
context.beginPath();
context.moveTo(330,332);
//context.bezierCurveTo(460,445,476,420,455,422);
context.bezierCurveTo(400,315,470,335,465,335);
context.bezierCurveTo(470,333,463,315,464,320);
context.bezierCurveTo(470,333,463,296,332,316);
context.bezierCurveTo(330,323,330,320,330,332);
context.fillStyle="#d62144";
context.fill();
context.stroke();
context.closePath();
//Ball
var imageObj = new Image();
imageObj.onload = function() {
context.drawImage(imageObj, 366, 180);
};
imageObj.src="ball.png";
//Pants
context.beginPath();
context.moveTo(348,448);
context.lineTo(348,460);
context.lineTo(442,463);
context.lineTo(440,450);
context.stroke();
context.fillStyle="#5062a2";
context.fill();
context.closePath();
//Body
//Sweatshirt
context.beginPath();
context.moveTo(349,387);
context.bezierCurveTo(340,397,340,400,329,433);
context.bezierCurveTo(340,432,340,430,349,433);
context.bezierCurveTo(350,437,350,430,342,444);
context.bezierCurveTo(340,450,420,460,443,448);
context.bezierCurveTo(440,437,440,430,439,433);
context.bezierCurveTo(430,437,450,420,456,433);
context.bezierCurveTo(450,397,445,400,440,390);
context.bezierCurveTo(400,422,360,400,349,386);
context.stroke();
context.fillStyle="#9d5f52";
context.fill();
context.closePath();
//Sweatshirt pt.2
context.beginPath();
context.moveTo(442,393);
context.bezierCurveTo(400,435,355,400,351,389);
context.stroke();
context.fillStyle="d72245";
context.fill();
context.closePath();
//Face - Had to be moved down for layering issues
context.beginPath();
context.moveTo(330,332);
context.bezierCurveTo(340,457,480,400,465,335);
context.bezierCurveTo(400,320,400,322,330,332);
context.stroke();
context.fillStyle="#fbd9b4";
context.fill();
context.closePath();
//Right Eye
var centerXStanRightEye = canvas.width / 2.38;
var centerYStanRightEye = canvas.height / 1.589;
context.beginPath();
for (var i = 0 * Math.PI; i < 2 * Math.PI; i += 0.01 ) {
xPos = centerXStanRightEye - (18 * Math.sin(i)) * Math.sin(0.71 * Math.PI) + (20 * Math.cos(i)) * Math.cos(0.71 * Math.PI);
yPos = centerYStanRightEye + (22 * Math.cos(i)) * Math.sin(0.71 * Math.PI) + (17 * Math.sin(i)) * Math.cos(0.71 * Math.PI);
if (i == 0) {
context.moveTo(xPos, yPos);
} else {
context.lineTo(xPos, yPos);
}
}
context.lineWidth = 2.5;
context.strokeStyle = "#232323";
context.stroke();
context.fillStyle="white";
context.fill();
context.closePath();
//Left Eye
var centerXStanLeftEye = canvas.width / 2.16;
var centerYStanLeftEye = canvas.height / 1.585;
context.beginPath();
for (var i = 0 * Math.PI; i < 2 * Math.PI; i += 0.01 ) {
xPos = centerXStanLeftEye - (17 * Math.sin(i)) * Math.sin(1.27 * Math.PI) + (22 * Math.cos(i)) * Math.cos(1.27 * Math.PI);
yPos = centerYStanLeftEye + (20 * Math.cos(i)) * Math.sin(1.27 * Math.PI) + (19 * Math.sin(i)) * Math.cos(1.27 * Math.PI);
if (i == 0) {
context.moveTo(xPos, yPos);
} else {
context.lineTo(xPos, yPos);
}
}
context.lineWidth = 2.5;
context.strokeStyle = "#232323";
context.stroke();
context.fillStyle="white";
context.fill();
context.closePath();
//Left Eye Pupil
var centerXStanLeftEyePupil = canvas.width / 2.33;
var centerYStanLeftEyePupil = canvas.height / 1.585;
var radiusStanLeftEyePupil = 1.9;
context.beginPath();
context.arc(centerXStanLeftEyePupil, centerYStanLeftEyePupil, radiusStanLeftEyePupil, 0, 2 * Math.PI, false);
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
context.fillStyle = 'black';
context.fill();
//Right Eye Pupil
var centerXStanRightEyePupil = canvas.width / 2.2;
var centerYStanRightEyePupil = canvas.height / 1.58;
var radiusStanRightEyePupil = 1.9;
context.beginPath();
context.arc(centerXStanRightEyePupil, centerYStanRightEyePupil, radiusStanRightEyePupil, 0, 2 * Math.PI, false);
context.fillStyle = 'black';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
//Mouth
context.beginPath();
context.moveTo(387,386);
context.bezierCurveTo(380,385,400,395,406,387);
context.stroke();
context.closePath();
//Sweatshirt Pt.3 - Right Arm
context.beginPath();
context.moveTo(353,415);
context.bezierCurveTo(350,417,350,420,348,430);
context.stroke();
context.closePath();
//Sweatshirt Pt.4 - Left Arm
context.beginPath();
context.moveTo(435,416);
context.bezierCurveTo(430,417,440,420,438,432);
context.stroke();
context.closePath();
//Sweatshirt Pt.5 - Zipper
context.beginPath();
context.moveTo(393,454);
context.lineTo(395,414)
context.stroke();
context.closePath();
//Button 1
var centerXStanButtonOne = canvas.width / 2.315;
var centerYStanButtonOne = canvas.height / 1.32;
var radiusStanButtonOne = 1.5;
context.beginPath();
context.arc(centerXStanButtonOne, centerYStanButtonOne, radiusStanButtonOne, 0, 2 * Math.PI, false);
context.fillStyle = 'blue';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
//Button 2
var centerXStanButtonTwo = canvas.width / 2.315;
var centerYStanButtonTwo = canvas.height / 1.275;
var radiusStanButtonTwo = 1.5;
context.beginPath();
context.arc(centerXStanButtonTwo, centerYStanButtonTwo, radiusStanButtonTwo, 0, 2 * Math.PI, false);
context.fillStyle = 'blue';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
//Button 3
var centerXStanButtonThree = canvas.width / 2.316;
var centerYStanButtonThree = canvas.height / 1.234;
var radiusStanButtonThree = 1.5;
context.beginPath();
context.arc(centerXStanButtonThree, centerYStanButtonThree, radiusStanButtonThree, 0, 2 * Math.PI, false);
context.fillStyle = 'blue';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
//Feet
var centerXStanFeet = canvas.width / 2.29;
var centerYStanFeet = canvas.height / 1.186;
context.beginPath();
for (var i = 0 * Math.PI; i < 2 * Math.PI; i += 0.01 ) {
xPos = centerXStanFeet - (10 * Math.sin(i)) * Math.sin(1 * Math.PI) + (56 * Math.cos(i)) * Math.cos(1 * Math.PI);
yPos = centerYStanFeet + (56 * Math.cos(i)) * Math.sin(1 * Math.PI) + (2 * Math.sin(i)) * Math.cos(1 * Math.PI);
if (i == 0) {
context.moveTo(xPos, yPos);
} else {
context.lineTo(xPos, yPos);
}
}
context.lineWidth = 2;
context.strokeStyle = "black";
context.stroke();
context.fillStyle="black";
context.fill();
context.closePath();
//Hands - Right Hand
var centerXStanRightHand = canvas.width / 2.65;
var centerYStanRightHand = canvas.height / 1.267;
var radiusStanRightHand = 10;
context.beginPath();
context.arc(centerXStanRightHand, centerYStanRightHand, radiusStanRightHand, 0, 2 * Math.PI, false);
context.fillStyle = '#d62144';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
//Hands - Right Thumb
var centerXStanRightThumb = canvas.width / 2.58;
var centerYStanRightThumb = canvas.height / 1.277;
var radiusStanRightThumb = 4;
context.beginPath();
context.arc(centerXStanRightThumb, centerYStanRightThumb, radiusStanRightThumb, 0, 2 * Math.PI, false);
context.fillStyle = '#d62144';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
//Hands - Left Hand
var centerXStanLeftHand = canvas.width / 2.01;
var centerYStanLeftHand = canvas.height / 1.255;
var radiusStanLeftHand = 10;
context.beginPath();
context.arc(centerXStanLeftHand, centerYStanLeftHand, radiusStanLeftHand, 0, 2 * Math.PI, false);
context.fillStyle = '#d62144';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
//Hands - Left Thumb
//Hands - Left Hand
var centerXStanLeftThumb = canvas.width / 2.055;
var centerYStanLeftThumb = canvas.height / 1.267;
var radiusStanLeftThumb = 4;
context.beginPath();
context.arc(centerXStanLeftThumb, centerYStanLeftThumb, radiusStanLeftThumb, 0, 2 * Math.PI, false);
context.fillStyle = '#d62144';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
////STAN - END - STAN - END - STAN - END - STAN - END - STAN - END
//::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
//CARTMAN - CARTMAN - CARTMAN - CARTMAN - CARTMAN - CARTMAN
//:::::::::::::::::::::::::::::::::::::::::::::::::::::::::
//Pants
context.beginPath();
context.moveTo(40,421);
context.lineTo(45,444);
context.lineTo(210,445);
context.lineTo(210,350);
context.stroke();
context.fillStyle="#724130";
context.fill();
context.closePath();
//Body
context.beginPath();
context.moveTo(50, 347);
context.bezierCurveTo(20,355,20,400,40,422);
context.bezierCurveTo(100,455,150,430,165,428);
context.bezierCurveTo(180,425,220,430,220,430);
context.lineTo(220,350);
context.stroke();
context.fillStyle="#d41f40";
context.fill();
context.closePath();
//Head
var centerXEricHead = canvas.width / 7.19;
var centerYEricHead = canvas.height / 1.686;
context.beginPath();
for (var i = 0 * Math.PI; i < 2 * Math.PI; i += 0.01 ) {
xPos = centerXEricHead - (58 * Math.sin(i)) * Math.sin(1 * Math.PI) + (79 * Math.cos(i)) * Math.cos(1 * Math.PI);
yPos = centerYEricHead + (79 * Math.cos(i)) * Math.sin(1 * Math.PI) + (58 * Math.sin(i)) * Math.cos(1 * Math.PI);
if (i == 0) {
context.moveTo(xPos, yPos);
} else {
context.lineTo(xPos, yPos);
}
}
context.lineWidth = 1;
context.strokeStyle = "#232323";
context.stroke();
context.fillStyle="#fbd9b4";
context.fill();
context.closePath();
//Hat Pt. 1
context.beginPath();
context.moveTo(47,316);
context.bezierCurveTo(100,290,150,290,205,308);
context.bezierCurveTo(150,210,40,280,46,315);
context.stroke();
context.fillStyle="#4bb3bc";
context.fill();
context.closePath();
//Hat Pt. 2
context.beginPath();
context.moveTo(47,316);
context.bezierCurveTo(100,290,150,290,205,308);
context.lineWidth=5;
context.strokeStyle="yellow";
context.stroke();
context.closePath();
//ball
var imageObjEric = new Image();
imageObjEric.onload = function() {
context.drawImage(imageObjEric, 85, 191);
};
imageObjEric.src="ball2.png";
//Eyes
context.beginPath();
context.moveTo(85,336);
context.lineTo(165,307);
context.lineWidth=1;
context.strokeStyle="black";
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(97,310);
context.lineTo(165,337);
context.strokeStyle="black";
context.stroke();
context.closePath();
//Mouth
var imageObjEricMouth = new Image();
imageObjEricMouth.onload = function() {
context.drawImage(imageObjEricMouth, 105, 295);
};
imageObjEricMouth.src="mouth2.png";
//Chin
context.beginPath();
context.moveTo(115,370);
context.bezierCurveTo(110,370,140,375,140,370);
context.stroke();
context.closePath();
//Double Chin
context.beginPath();
context.moveTo(190,350);
context.bezierCurveTo(140,390,105,385,65,355);
context.stroke();
context.closePath();
//Feet - Right Foot
var centerXEricRightFoot = canvas.width / 11;
var centerYEricRightFoot = canvas.height / 1.24;
context.beginPath();
for (var i = 0 * Math.PI; i < 2 * Math.PI; i += 0.01 ) {
xPos = centerXEricRightFoot - (10 * Math.sin(i)) * Math.sin(1 * Math.PI) + (40 * Math.cos(i)) * Math.cos(1 * Math.PI);
yPos = centerYEricRightFoot + (40 * Math.cos(i)) * Math.sin(1 * Math.PI) + (2 * Math.sin(i)) * Math.cos(1 * Math.PI);
if (i == 0) {
context.moveTo(xPos, yPos);
} else {
context.lineTo(xPos, yPos);
}
}
context.lineWidth = 2;
context.strokeStyle = "black";
context.stroke();
context.fillStyle="black";
context.fill();
context.closePath();
//Feet - Left Foot
var centerXEricLeftFoot = canvas.width / 5;
var centerYEricLeftFoot = canvas.height / 1.24;
context.beginPath();
for (var i = 0 * Math.PI; i < 2 * Math.PI; i += 0.01 ) {
xPos = centerXEricLeftFoot - (10 * Math.sin(i)) * Math.sin(1 * Math.PI) + (40 * Math.cos(i)) * Math.cos(1 * Math.PI);
yPos = centerYEricLeftFoot + (40 * Math.cos(i)) * Math.sin(1 * Math.PI) + (2 * Math.sin(i)) * Math.cos(1 * Math.PI);
if (i == 0) {
context.moveTo(xPos, yPos);
} else {
context.lineTo(xPos, yPos);
}
}
context.lineWidth = 2;
context.strokeStyle = "black";
context.stroke();
context.fillStyle="black";
context.fill();
context.closePath();
//Hands - Right Hand
var imageObjEricRightHand = new Image();
imageObjEricRightHand.onload = function() {
context.drawImage(imageObjEricRightHand, 10, 322);
};
imageObjEricRightHand.src="RightHandCartman.png";
//Zipper
context.beginPath();
context.moveTo(131,436);
context.lineTo(134,384);
context.stroke();
context.closePath();
//KYLE - KYLE - KYLE - KYLE - KYLE - KYLE - KYLE - KYLE - KYLE
//::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
//Pants
context.beginPath();
context.rect(216, 445, 90, 20);
context.fillStyle ="#2f4f4c";
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
//Body - Sweatshirt Pt. 2
context.beginPath();
context.moveTo(215,387);
context.bezierCurveTo(210,390,200,400,195,430);
context.lineTo(210,430);
context.lineTo(205,445);
context.bezierCurveTo(220,460,300,460,310,452);
context.lineTo(310,435);
context.lineTo(325,435);
context.bezierCurveTo(320,420,320,400,310,390);
context.stroke();
context.fillStyle="#fe6110";
context.fill();
context.closePath();
//Pocket 1
context.beginPath();
context.rect(230, 416, 20, 20);
//context.moveTo(200,300);
context.lineTo(240,425);
context.lineTo(250,415);
context.fillStyle ="#2f4f4c";
//context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
//Pocket 2
context.beginPath();
context.rect(273,416, 20, 20);
//context.moveTo(200,300);
context.lineTo(283,427);
context.lineTo(294,415);
context.fillStyle ="#2f4f4c";
//context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
//Body - Sweatshirt Pt. 1
var centerXKyleScarf = canvas.width / 3.45;
var centerYKyleScarf = canvas.height / 1.50;
context.beginPath();
for (var i = 0 * Math.PI; i < 2 * Math.PI; i += 0.01 ) {
xPos = centerXKyleScarf - (43 * Math.sin(i)) * Math.sin(1.02 * Math.PI) + (55 * Math.cos(i)) * Math.cos(1.02 * Math.PI);
yPos = centerYKyleScarf + (55 * Math.cos(i)) * Math.sin(1.02 * Math.PI) + (43 * Math.sin(i)) * Math.cos(1.02 * Math.PI);
if (i == 0) {
context.moveTo(xPos, yPos);
} else {
context.lineTo(xPos, yPos);
}
}
context.lineWidth = 1;
context.strokeStyle = "#232323";
context.stroke();
context.fillStyle="#229a38";
context.fill();
context.closePath();
//Head
var centerXKyleHead = canvas.width / 3.45;
var centerYKyleHead = canvas.height / 1.59;
context.beginPath();
for (var i = 0 * Math.PI; i < 2 * Math.PI; i += 0.01 ) {
xPos = centerXKyleHead - (57 * Math.sin(i)) * Math.sin(0 * Math.PI) + (67 * Math.cos(i)) * Math.cos(0 * Math.PI);
yPos = centerYKyleHead + (67 * Math.cos(i)) * Math.sin(0 * Math.PI) + (57 * Math.sin(i)) * Math.cos(0 * Math.PI);
if (i == 0) {
context.moveTo(xPos, yPos);
} else {
context.lineTo(xPos, yPos);
}
}
context.lineWidth = 1;
context.strokeStyle = "#232323";
context.fillStyle="#fbd9b4";
context.fill();
context.stroke();
context.closePath();
//Hat Pt. 1
var rectWidth = 130;
var rectHeight = 59;
var rectX = 190;
var rectY = 193;
var cornerRadius = 10;
// translate context to center of canvas
context.translate(50 / 2, 100 / 2);
// rotate 45 degrees clockwise
context.rotate(Math.PI / 55);
context.beginPath();
context.moveTo(rectX, rectY);
context.lineTo(rectX + rectWidth - cornerRadius, rectY);
context.arcTo(rectX + rectWidth, rectY, rectX + rectWidth, rectY + cornerRadius, cornerRadius);
context.lineTo(rectX + rectWidth, rectY + rectHeight);
context.lineTo(185,245);
context.lineTo(185,205);
context.bezierCurveTo(185,195,190,195,195,193);
context.lineWidth = 1;
context.fillStyle="#57c426";
context.fill();
context.stroke();
//Hat Pt. 2
context.beginPath()
context.moveTo(310,217);
context.lineTo(195,218);
context.lineTo(195,259);
context.bezierCurveTo(220,247,290,250,312,255);
context.lineTo(310,217);
context.stroke();
context.fillStyle="#229a38";
context.fill();
context.closePath();
//Hat Pt. 3
var centerXKyleHat = canvas.width / 2.78;
var centerYKyleHat = canvas.height / 2;
context.beginPath();
for (var i = 0 * Math.PI; i < 2 * Math.PI; i += 0.01 ) {
xPos = centerXKyleHat - (10 * Math.sin(i)) * Math.sin(1.27 * Math.PI) + (22 * Math.cos(i)) * Math.cos(1.27 * Math.PI);
yPos = centerYKyleHat + (38 * Math.cos(i)) * Math.sin(1.27 * Math.PI) + (19 * Math.sin(i)) * Math.cos(1.27 * Math.PI);
if (i == 0) {
context.moveTo(xPos, yPos);
} else {
context.lineTo(xPos, yPos);
}
}
context.lineWidth = 1;
context.strokeStyle = "#232323";
context.stroke();
context.fillStyle="#57c426";
context.fill();
context.closePath();
//Hat Pt. 4
var centerXKyleHat = canvas.width / 4.9;
var centerYKyleHat = canvas.height / 2;
context.beginPath();
for (var i = 0 * Math.PI; i < 2 * Math.PI; i += 0.01 ) {
xPos = centerXKyleHat - (10 * Math.sin(i)) * Math.sin(.68 * Math.PI) + (22 * Math.cos(i)) * Math.cos(.68 * Math.PI);
yPos = centerYKyleHat + (36 * Math.cos(i)) * Math.sin(.68 * Math.PI) + (19 * Math.sin(i)) * Math.cos(.68 * Math.PI);
if (i == 0) {
context.moveTo(xPos, yPos);
} else {
context.lineTo(xPos, yPos);
}
}
context.lineWidth = 1;
context.strokeStyle = "#232323";
context.stroke();
context.fillStyle="#57c426";
context.fill();
context.closePath();
//Right Eye
var centerXKyleRightEye = canvas.width / 3.88;
var centerYKyleRightEye = canvas.height / 2;
context.beginPath();
for (var i = 0 * Math.PI; i < 2 * Math.PI; i += 0.01 ) {
xPos = centerXKyleRightEye - (19 * Math.sin(i)) * Math.sin(0.7 * Math.PI) + (23 * Math.cos(i)) * Math.cos(0.7 * Math.PI);
yPos = centerYKyleRightEye + (23 * Math.cos(i)) * Math.sin(0.7 * Math.PI) + (19 * Math.sin(i)) * Math.cos(0.7 * Math.PI);
if (i == 0) {
context.moveTo(xPos, yPos);
} else {
context.lineTo(xPos, yPos);
}
}
context.lineWidth = 2.5;
context.strokeStyle = "#232323";
context.stroke();
context.fillStyle="white";
context.fill();
context.closePath();
//Right Eye Pupil
var centerXKyleRightEyePupil = canvas.width / 3.74;
var centerYKyleRightEyePupil = canvas.height / 1.99;
var radiusKyleRightEyePupil = 1.9;
context.beginPath();
context.arc(centerXKyleRightEyePupil, centerYKyleRightEyePupil, radiusKyleRightEyePupil, 0, 2 * Math.PI, false);
context.fillStyle = 'black';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
//Left Eye
var centerXKyleLeftEye = canvas.width / 3.28;
var centerYKyleLeftEye = canvas.height / 2;
context.beginPath();
for (var i = 0 * Math.PI; i < 2 * Math.PI; i += 0.01 ) {
xPos = centerXKyleLeftEye - (19 * Math.sin(i)) * Math.sin(1.2 * Math.PI) + (23 * Math.cos(i)) * Math.cos(1.2 * Math.PI);
yPos = centerYKyleLeftEye + (23 * Math.cos(i)) * Math.sin(1.2 * Math.PI) + (19 * Math.sin(i)) * Math.cos(1.2 * Math.PI);
if (i == 0) {
context.moveTo(xPos, yPos);
} else {
context.lineTo(xPos, yPos);
}
}
context.lineWidth = 2.5;
context.strokeStyle = "#232323";
context.stroke();
context.fillStyle="white";
context.fill();
context.closePath();
//Left Eye Pupil
var centerXKyleLeftEyePupil = canvas.width / 3.4;
var centerYKyleLeftEyePupil = canvas.height / 1.995;
var radiusKyleLeftEyePupil = 1.9;
context.beginPath();
context.arc(centerXKyleLeftEyePupil, centerYKyleLeftEyePupil, radiusKyleLeftEyePupil, 0, 2 * Math.PI, false);
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
context.fillStyle = 'black';
context.fill();
//Mouth
var imageObjKyle = new Image();
imageObjKyle.onload = function() {
context.drawImage(imageObjKyle, 245, 313);
};
imageObjKyle.src="mouthkyle.png";
//Hands - Right Hand
var centerXKyleRightHand = canvas.width / 4.5;
var centerYKyleRightHand = canvas.height / 1.457;
var radiusKyleRightHand = 11;
context.beginPath();
context.arc(centerXKyleRightHand, centerYKyleRightHand, radiusKyleRightHand, 0, 2 * Math.PI, false);
context.fillStyle = '#57c526';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
//Hands - Left Hand
var centerXKyleLeftHand = canvas.width / 2.86;
var centerYKyleLeftHand = canvas.height / 1.46;
var radiusKyleLeftHand = 11;
context.beginPath();
context.arc(centerXKyleLeftHand, centerYKyleLeftHand, radiusKyleLeftHand, 0, 2 * Math.PI, false);
context.fillStyle = '#57c526';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
//Hands - Right Thumb
var centerXKyleRightThumb = canvas.width / 4.3;
var centerYKyleRightThumb = canvas.height / 1.477;
var radiusKyleRightThumb = 4;
context.beginPath();
context.arc(centerXKyleRightThumb, centerYKyleRightThumb, radiusKyleRightThumb, 0, 2 * Math.PI, false);
context.fillStyle = '#57c526';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
//Hands - Left Thumb
//Hands - Left Hand
var centerXKyleLeftThumb = canvas.width / 2.955;
var centerYKyleLeftThumb = canvas.height / 1.47;
var radiusKyleLeftThumb = 4;
context.beginPath();
context.arc(centerXKyleLeftThumb, centerYKyleLeftThumb, radiusKyleLeftThumb, 0, 2 * Math.PI, false);
context.fillStyle = '#57c526';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
//Feet
var centerXKyleFeet = canvas.width / 3.46;
var centerYKyleFeet = canvas.height / 1.37;
context.beginPath();
for (var i = 0 * Math.PI; i < 2 * Math.PI; i += 0.01 ) {
xPos = centerXKyleFeet - (10 * Math.sin(i)) * Math.sin(.99 * Math.PI) + (56 * Math.cos(i)) * Math.cos(.99 * Math.PI);
yPos = centerYKyleFeet + (56 * Math.cos(i)) * Math.sin(.99 * Math.PI) + (2 * Math.sin(i)) * Math.cos(.99 * Math.PI);
if (i == 0) {
context.moveTo(xPos, yPos);
} else {
context.lineTo(xPos, yPos);
}
}
context.lineWidth = 2;
context.strokeStyle = "black";
context.stroke();
context.fillStyle="black";
context.fill();
context.closePath();
//Zipper
context.beginPath();
context.moveTo(260,394);
context.lineTo(257,347);
context.lineWidth="1";
context.stroke();
context.closePath();
//KYLE - END - KYLE - END - KYLE - END - KYLE - END - KYLE
//::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
//// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< END HERE
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title> Meet Some Friends Of Mine </title>
<style type="text/css">
body,td,th {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color: #f58821;
}
body {
background-image:url(bgfinal.jpg);
background-repeat:no-repeat;
}
#myCanvas { border: rgb(102,0,255) medium dashed; }
</style>
</head>
<body>
<canvas id="myCanvas" width="900" height="550"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.font = 'italic 20pt Calibri';
context.fillText('Meet Some Friends Of Mine', 20, 540);
////KENNY - KENNY - KENNY - KENNY - KENNY
////:::::::::::::::::::::::::::::::::::::
//
//Head
context.beginPath();
var centerXKennyHead = canvas.width / 1.747;
var centerYKennyHead = canvas.height / 1.63;
var radiusHead = 72;
context.beginPath();
context.arc(centerXKennyHead, centerYKennyHead, radiusHead, 0, 2 * Math.PI, false);
context.fillStyle = '#fd6013';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
context.closePath();
//sweatshirt hoodie opening
var centerXKennyHoodie = 38;
var centerYKennyHoodie = 45;
var radiusHoodie = 30;
// save state
context.save();
// translate context
context.translate(canvas.width / 2, canvas.height / 2);
// scale context horizontally
context.scale(1.7, 1.55);
// draw circle which will be stretched into an oval
context.beginPath();
context.arc(centerXKennyHoodie, centerYKennyHoodie, radiusHoodie, 0, 2 * Math.PI, false);
// restore to original state
context.restore();
// apply styling
context.fillStyle = '#fd6013';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
//Sweatshirt Inside
var centerXKennyInside = 0;
var centerYKennyInside = 0;
var radiusKennyInside = 40;
context.save();
context.translate(canvas.width / 1.75, canvas.height / 1.61);
context.scale(1.15, .99);
context.beginPath();
context.arc(centerXKennyInside, centerYKennyInside, radiusKennyInside, 0, 2 * Math.PI, false);
// restore to original state
context.restore();
// apply styling
context.fillStyle = '#724130';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
//Face
context.beginPath();
context.moveTo(515, 380);
context.bezierCurveTo(510, 390, 588,340, 515, 300);
context.bezierCurveTo(510, 308, 448,330, 516, 380);
context.fillStyle="#fbd9b4";
context.fill();
context.lineWidth = 1;
// line color
context.strokeStyle = 'black';
context.stroke();
//Left Eye
var centerXLeftEye = canvas.width / 1.815;
var centerYLeftEye = canvas.height / 1.63;
context.beginPath();
for (var i = 0.7 * Math.PI; i < 1.8 * Math.PI; i += 0.01 ) {
xPos = centerXLeftEye - (18 * Math.sin(i)) * Math.sin(0.7 * Math.PI) + (22 * Math.cos(i)) * Math.cos(0.7 * Math.PI);
yPos = centerYLeftEye + (22 * Math.cos(i)) * Math.sin(0.7 * Math.PI) + (18 * Math.sin(i)) * Math.cos(0.7 * Math.PI);
if (i == 0) {
context.moveTo(xPos, yPos);
} else {
context.lineTo(xPos, yPos);
}
}
context.lineWidth = 2.5;
context.fillStyle="white";
context.strokeStyle = "#232323";
context.bezierCurveTo(475, 340, 490,320,493,319);
context.stroke();
context.fill();
context.closePath();
//Left Eye Pupil
var centerXLeftEyePupil = canvas.width / 1.779;
var centerYLeftEyePupil = canvas.height / 1.695;
var radiusLeftEyePupil = 1.9;
context.beginPath();
context.arc(centerXLeftEyePupil, centerYLeftEyePupil, radiusLeftEyePupil, 0, 2 * Math.PI, false);
context.fillStyle = 'black';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
//Right Eye
var centerXRightEye = canvas.width / 1.69;
var centerYRightEye = canvas.height / 1.629;
context.beginPath();
for (var i = 0.1 * Math.PI; i < 1.4 * Math.PI; i += 0.01 ) {
xPos = centerXRightEye - (18 * Math.sin(i)) * Math.sin(0.23 * Math.PI) + (22 * Math.cos(i)) * Math.cos(0.29 * Math.PI);
yPos = centerYRightEye + (22 * Math.cos(i)) * Math.sin(0.23 * Math.PI) + (18 * Math.sin(i)) * Math.cos(0.23 * Math.PI);
if (i == 0) {
context.moveTo(xPos, yPos);
} else {
context.lineTo(xPos, yPos);
}
}
context.fillStyle="white";
context.lineWidth = 2.5;
context.strokeStyle = "#232323";
context.bezierCurveTo(550, 340, 543,350,543,355);
context.stroke();
context.fill();
context.closePath();
//Right Eye Pupil
var centerXLeftEyePupil = canvas.width / 1.69;
var centerYLeftEyePupil = canvas.height / 1.695;
var radiusLeftEyePupil = 1.9;
context.beginPath();
context.arc(centerXLeftEyePupil, centerYLeftEyePupil, radiusLeftEyePupil, 0, 2 * Math.PI, false);
context.fillStyle = 'black';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
//String
context.beginPath();
context.moveTo(515, 380);
context.bezierCurveTo(510, 410, 503,410,510, 400);
context.bezierCurveTo(510, 390, 518,360, 520, 402);
context.lineWidth = 1;
context.strokeStyle="black";
context.stroke();
context.closePath();
//Torso
context.beginPath();
context.moveTo(465,390);
context.bezierCurveTo(450, 410, 455,420, 459, 442);
context.bezierCurveTo(460, 443, 466,440, 464, 439);
context.bezierCurveTo(510, 450, 548,450, 565, 443);
context.bezierCurveTo(582, 452, 588,430, 577, 427);
context.bezierCurveTo(580, 425, 580,425, 565, 390);
context.bezierCurveTo(525, 415, 505,420, 465, 390);
context.lineWidth=1;
context.fillStyle="#fd6013";
context.fill();
context.strokeStyle="black";
context.stroke();
context.closePath();
//Legs
context.beginPath();
context.moveTo(470,455);
context.lineTo(470,440);
context.bezierCurveTo(550, 455, 565,440, 559, 444);
context.lineTo(558,455);
context.lineTo(470,455);
//context.lineTo(400,400);
context.fillStyle="#fd6013";
context.fill();
context.strokeStyle="black";
context.stroke();
context.closePath();
//Feet
var centerXKennyFeet = 0;
var centerYKennyFeet = 0;
var radiusKennyFeet = 20;
// save state
context.save();
// translate context
context.translate(canvas.width / 1.75, canvas.height / 1.203);
// scale context horizontally
context.scale(2.5, .1);
// draw circle which will be stretched into an oval
context.beginPath();
context.arc(centerXKennyFeet, centerYKennyFeet, radiusKennyFeet, 0, 2 * Math.PI, false);
// restore to original state
context.restore();
// apply styling
context.fillStyle = 'black';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
//Right Thumb
var centerXKennyRightThumb = canvas.width / 1.933;
var centerYKennyRightThumb = canvas.height / 1.282;
var radiusKennyRightThumb = 3.8;
context.beginPath();
context.arc(centerXKennyRightThumb, centerYKennyRightThumb, radiusKennyRightThumb, 0, 2 * Math.PI, false);
context.fillStyle = 'green';
//context.fill();
context.lineWidth = 1;
context.fillStyle="#724130";
context.fill();
context.strokeStyle = 'black';
context.stroke();
context.closePath();
//Right Hand Part 2
var centerXRightHandKenny = canvas.width / 1.575;
var centerYRightHandKenny = canvas.height / 1.265;
var radiusRightHandKenny = 10;
//context.translate(200,400);
//context.rotate(Math.PI/10);
context.beginPath();
context.arc(centerXRightHandKenny, centerYRightHandKenny, radiusRightHandKenny, 0, 2 * Math.PI, false);
context.fillStyle = '#724130';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke();
//Left Thumb
var centerXKennyLeftThumb = canvas.width / 1.6;
var centerYKennyLeftThumb = canvas.height / 1.275;
var radiusKennyLeftThumb = 3.8;
context.beginPath();
context.arc(centerXKennyLeftThumb, centerYKennyLeftThumb, radiusKennyLeftThumb, 0, 2 * Math.PI, false);
context.fillStyle = '#724130';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
context.closePath();
//Right Arm
context.beginPath();
context.moveTo(470,427);
context.bezierCurveTo(460,445,475,420,470,420);
context.stroke();
context.closePath();
//Right Arm pt.2
context.beginPath();
context.moveTo(557,420);
context.bezierCurveTo(560,415,560,430,560,430);
context.stroke();
context.closePath();
//Left Hand Part 2
context.beginPath();
context.moveTo(458,422);
//context.bezierCurveTo(460,445,476,420,455,422);
context.bezierCurveTo(450,425,480,420,460,442);
context.fill();
context.stroke();
context.closePath();
//Zipper
context.beginPath();
context.moveTo(515,410);
context.lineTo(515,447);
context.stroke();
context.closePath();
//
////KENNY END - KENNY END - KENNY END - KENNY END - KENNY END
////:::::::::::::::::::::::::::::::::::::::::::::::::::::::::
//
//
////STAN - STAN - STAN - STAN - STAN - STAN - STAN - STAN -STAN
////:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
//Head
//context.beginPath();
// var centerXStanHead = canvas.width / 2.26;
// var centerYStanHead = canvas.height / 1.63;
// var radiusStanHead = 68;
//
// context.beginPath();
// context.arc(centerXStanHead, centerYStanHead, radiusStanHead, 0, 2 * Math.PI, false);
// context.fillStyle = '#fd6013';
// //context.fill();
// context.lineWidth = 1;
// context.strokeStyle = 'black';
// context.stroke();
// context.closePath();
//Hat Pt. 1
context.beginPath();
context.moveTo(332,315);
context.bezierCurveTo(390,220,460,295,465,321);
context.stroke();
context.fillStyle="#5062a2";
context.fill();
context.closePath();
//Hat pt.2
context.beginPath();
context.moveTo(330,332);
//context.bezierCurveTo(460,445,476,420,455,422);
context.bezierCurveTo(400,315,470,335,465,335);
context.bezierCurveTo(470,333,463,315,464,320);
context.bezierCurveTo(470,333,463,296,332,316);
context.bezierCurveTo(330,323,330,320,330,332);
context.fillStyle="#d62144";
context.fill();
context.stroke();
context.closePath();
//Ball
var imageObj = new Image();
imageObj.onload = function() {
context.drawImage(imageObj, 366, 180);
};
imageObj.src="ball.png";
//Pants
context.beginPath();
context.moveTo(348,448);
context.lineTo(348,460);
context.lineTo(442,463);
context.lineTo(440,450);
context.stroke();
context.fillStyle="#5062a2";
context.fill();
context.closePath();
//Body
//Sweatshirt
context.beginPath();
context.moveTo(349,387);
context.bezierCurveTo(340,397,340,400,329,433);
context.bezierCurveTo(340,432,340,430,349,433);
context.bezierCurveTo(350,437,350,430,342,444);
context.bezierCurveTo(340,450,420,460,443,448);
context.bezierCurveTo(440,437,440,430,439,433);
context.bezierCurveTo(430,437,450,420,456,433);
context.bezierCurveTo(450,397,445,400,440,390);
context.bezierCurveTo(400,422,360,400,349,386);
context.stroke();
context.fillStyle="#9d5f52";
context.fill();
context.closePath();
//Sweatshirt pt.2
context.beginPath();
context.moveTo(442,393);
context.bezierCurveTo(400,435,355,400,351,389);
context.stroke();
context.fillStyle="d72245";
context.fill();
context.closePath();
//Face - Had to be moved down for layering issues
context.beginPath();
context.moveTo(330,332);
context.bezierCurveTo(340,457,480,400,465,335);
context.bezierCurveTo(400,320,400,322,330,332);
context.stroke();
context.fillStyle="#fbd9b4";
context.fill();
context.closePath();
//Right Eye
var centerXStanRightEye = canvas.width / 2.38;
var centerYStanRightEye = canvas.height / 1.589;
context.beginPath();
for (var i = 0 * Math.PI; i < 2 * Math.PI; i += 0.01 ) {
xPos = centerXStanRightEye - (18 * Math.sin(i)) * Math.sin(0.71 * Math.PI) + (20 * Math.cos(i)) * Math.cos(0.71 * Math.PI);
yPos = centerYStanRightEye + (22 * Math.cos(i)) * Math.sin(0.71 * Math.PI) + (17 * Math.sin(i)) * Math.cos(0.71 * Math.PI);
if (i == 0) {
context.moveTo(xPos, yPos);
} else {
context.lineTo(xPos, yPos);
}
}
context.lineWidth = 2.5;
context.strokeStyle = "#232323";
context.stroke();
context.fillStyle="white";
context.fill();
context.closePath();
//Left Eye
var centerXStanLeftEye = canvas.width / 2.16;
var centerYStanLeftEye = canvas.height / 1.585;
context.beginPath();
for (var i = 0 * Math.PI; i < 2 * Math.PI; i += 0.01 ) {
xPos = centerXStanLeftEye - (17 * Math.sin(i)) * Math.sin(1.27 * Math.PI) + (22 * Math.cos(i)) * Math.cos(1.27 * Math.PI);
yPos = centerYStanLeftEye + (20 * Math.cos(i)) * Math.sin(1.27 * Math.PI) + (19 * Math.sin(i)) * Math.cos(1.27 * Math.PI);
if (i == 0) {
context.moveTo(xPos, yPos);
} else {
context.lineTo(xPos, yPos);
}
}
context.lineWidth = 2.5;
context.strokeStyle = "#232323";
context.stroke();
context.fillStyle="white";
context.fill();
context.closePath();
//Left Eye Pupil
var centerXStanLeftEyePupil = canvas.width / 2.33;
var centerYStanLeftEyePupil = canvas.height / 1.585;
var radiusStanLeftEyePupil = 1.9;
context.beginPath();
context.arc(centerXStanLeftEyePupil, centerYStanLeftEyePupil, radiusStanLeftEyePupil, 0, 2 * Math.PI, false);
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
context.fillStyle = 'black';
context.fill();
//Right Eye Pupil
var centerXStanRightEyePupil = canvas.width / 2.2;
var centerYStanRightEyePupil = canvas.height / 1.58;
var radiusStanRightEyePupil = 1.9;
context.beginPath();
context.arc(centerXStanRightEyePupil, centerYStanRightEyePupil, radiusStanRightEyePupil, 0, 2 * Math.PI, false);
context.fillStyle = 'black';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
//Mouth
context.beginPath();
context.moveTo(387,386);
context.bezierCurveTo(380,385,400,395,406,387);
context.stroke();
context.closePath();
//Sweatshirt Pt.3 - Right Arm
context.beginPath();
context.moveTo(353,415);
context.bezierCurveTo(350,417,350,420,348,430);
context.stroke();
context.closePath();
//Sweatshirt Pt.4 - Left Arm
context.beginPath();
context.moveTo(435,416);
context.bezierCurveTo(430,417,440,420,438,432);
context.stroke();
context.closePath();
//Sweatshirt Pt.5 - Zipper
context.beginPath();
context.moveTo(393,454);
context.lineTo(395,414)
context.stroke();
context.closePath();
//Button 1
var centerXStanButtonOne = canvas.width / 2.315;
var centerYStanButtonOne = canvas.height / 1.32;
var radiusStanButtonOne = 1.5;
context.beginPath();
context.arc(centerXStanButtonOne, centerYStanButtonOne, radiusStanButtonOne, 0, 2 * Math.PI, false);
context.fillStyle = 'blue';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
//Button 2
var centerXStanButtonTwo = canvas.width / 2.315;
var centerYStanButtonTwo = canvas.height / 1.275;
var radiusStanButtonTwo = 1.5;
context.beginPath();
context.arc(centerXStanButtonTwo, centerYStanButtonTwo, radiusStanButtonTwo, 0, 2 * Math.PI, false);
context.fillStyle = 'blue';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
//Button 3
var centerXStanButtonThree = canvas.width / 2.316;
var centerYStanButtonThree = canvas.height / 1.234;
var radiusStanButtonThree = 1.5;
context.beginPath();
context.arc(centerXStanButtonThree, centerYStanButtonThree, radiusStanButtonThree, 0, 2 * Math.PI, false);
context.fillStyle = 'blue';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
//Feet
var centerXStanFeet = canvas.width / 2.29;
var centerYStanFeet = canvas.height / 1.186;
context.beginPath();
for (var i = 0 * Math.PI; i < 2 * Math.PI; i += 0.01 ) {
xPos = centerXStanFeet - (10 * Math.sin(i)) * Math.sin(1 * Math.PI) + (56 * Math.cos(i)) * Math.cos(1 * Math.PI);
yPos = centerYStanFeet + (56 * Math.cos(i)) * Math.sin(1 * Math.PI) + (2 * Math.sin(i)) * Math.cos(1 * Math.PI);
if (i == 0) {
context.moveTo(xPos, yPos);
} else {
context.lineTo(xPos, yPos);
}
}
context.lineWidth = 2;
context.strokeStyle = "black";
context.stroke();
context.fillStyle="black";
context.fill();
context.closePath();
//Hands - Right Hand
var centerXStanRightHand = canvas.width / 2.65;
var centerYStanRightHand = canvas.height / 1.267;
var radiusStanRightHand = 10;
context.beginPath();
context.arc(centerXStanRightHand, centerYStanRightHand, radiusStanRightHand, 0, 2 * Math.PI, false);
context.fillStyle = '#d62144';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
//Hands - Right Thumb
var centerXStanRightThumb = canvas.width / 2.58;
var centerYStanRightThumb = canvas.height / 1.277;
var radiusStanRightThumb = 4;
context.beginPath();
context.arc(centerXStanRightThumb, centerYStanRightThumb, radiusStanRightThumb, 0, 2 * Math.PI, false);
context.fillStyle = '#d62144';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
//Hands - Left Hand
var centerXStanLeftHand = canvas.width / 2.01;
var centerYStanLeftHand = canvas.height / 1.255;
var radiusStanLeftHand = 10;
context.beginPath();
context.arc(centerXStanLeftHand, centerYStanLeftHand, radiusStanLeftHand, 0, 2 * Math.PI, false);
context.fillStyle = '#d62144';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
//Hands - Left Thumb
//Hands - Left Hand
var centerXStanLeftThumb = canvas.width / 2.055;
var centerYStanLeftThumb = canvas.height / 1.267;
var radiusStanLeftThumb = 4;
context.beginPath();
context.arc(centerXStanLeftThumb, centerYStanLeftThumb, radiusStanLeftThumb, 0, 2 * Math.PI, false);
context.fillStyle = '#d62144';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
////STAN - END - STAN - END - STAN - END - STAN - END - STAN - END
//::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
//CARTMAN - CARTMAN - CARTMAN - CARTMAN - CARTMAN - CARTMAN
//:::::::::::::::::::::::::::::::::::::::::::::::::::::::::
//Pants
context.beginPath();
context.moveTo(40,421);
context.lineTo(45,444);
context.lineTo(210,445);
context.lineTo(210,350);
context.stroke();
context.fillStyle="#724130";
context.fill();
context.closePath();
//Body
context.beginPath();
context.moveTo(50, 347);
context.bezierCurveTo(20,355,20,400,40,422);
context.bezierCurveTo(100,455,150,430,165,428);
context.bezierCurveTo(180,425,220,430,220,430);
context.lineTo(220,350);
context.stroke();
context.fillStyle="#d41f40";
context.fill();
context.closePath();
//Head
var centerXEricHead = canvas.width / 7.19;
var centerYEricHead = canvas.height / 1.686;
context.beginPath();
for (var i = 0 * Math.PI; i < 2 * Math.PI; i += 0.01 ) {
xPos = centerXEricHead - (58 * Math.sin(i)) * Math.sin(1 * Math.PI) + (79 * Math.cos(i)) * Math.cos(1 * Math.PI);
yPos = centerYEricHead + (79 * Math.cos(i)) * Math.sin(1 * Math.PI) + (58 * Math.sin(i)) * Math.cos(1 * Math.PI);
if (i == 0) {
context.moveTo(xPos, yPos);
} else {
context.lineTo(xPos, yPos);
}
}
context.lineWidth = 1;
context.strokeStyle = "#232323";
context.stroke();
context.fillStyle="#fbd9b4";
context.fill();
context.closePath();
//Hat Pt. 1
context.beginPath();
context.moveTo(47,316);
context.bezierCurveTo(100,290,150,290,205,308);
context.bezierCurveTo(150,210,40,280,46,315);
context.stroke();
context.fillStyle="#4bb3bc";
context.fill();
context.closePath();
//Hat Pt. 2
context.beginPath();
context.moveTo(47,316);
context.bezierCurveTo(100,290,150,290,205,308);
context.lineWidth=5;
context.strokeStyle="yellow";
context.stroke();
context.closePath();
//ball
var imageObjEric = new Image();
imageObjEric.onload = function() {
context.drawImage(imageObjEric, 85, 191);
};
imageObjEric.src="ball2.png";
//Eyes
context.beginPath();
context.moveTo(85,336);
context.lineTo(165,307);
context.lineWidth=1;
context.strokeStyle="black";
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(97,310);
context.lineTo(165,337);
context.strokeStyle="black";
context.stroke();
context.closePath();
//Mouth
var imageObjEricMouth = new Image();
imageObjEricMouth.onload = function() {
context.drawImage(imageObjEricMouth, 105, 295);
};
imageObjEricMouth.src="mouth2.png";
//Chin
context.beginPath();
context.moveTo(115,370);
context.bezierCurveTo(110,370,140,375,140,370);
context.stroke();
context.closePath();
//Double Chin
context.beginPath();
context.moveTo(190,350);
context.bezierCurveTo(140,390,105,385,65,355);
context.stroke();
context.closePath();
//Feet - Right Foot
var centerXEricRightFoot = canvas.width / 11;
var centerYEricRightFoot = canvas.height / 1.24;
context.beginPath();
for (var i = 0 * Math.PI; i < 2 * Math.PI; i += 0.01 ) {
xPos = centerXEricRightFoot - (10 * Math.sin(i)) * Math.sin(1 * Math.PI) + (40 * Math.cos(i)) * Math.cos(1 * Math.PI);
yPos = centerYEricRightFoot + (40 * Math.cos(i)) * Math.sin(1 * Math.PI) + (2 * Math.sin(i)) * Math.cos(1 * Math.PI);
if (i == 0) {
context.moveTo(xPos, yPos);
} else {
context.lineTo(xPos, yPos);
}
}
context.lineWidth = 2;
context.strokeStyle = "black";
context.stroke();
context.fillStyle="black";
context.fill();
context.closePath();
//Feet - Left Foot
var centerXEricLeftFoot = canvas.width / 5;
var centerYEricLeftFoot = canvas.height / 1.24;
context.beginPath();
for (var i = 0 * Math.PI; i < 2 * Math.PI; i += 0.01 ) {
xPos = centerXEricLeftFoot - (10 * Math.sin(i)) * Math.sin(1 * Math.PI) + (40 * Math.cos(i)) * Math.cos(1 * Math.PI);
yPos = centerYEricLeftFoot + (40 * Math.cos(i)) * Math.sin(1 * Math.PI) + (2 * Math.sin(i)) * Math.cos(1 * Math.PI);
if (i == 0) {
context.moveTo(xPos, yPos);
} else {
context.lineTo(xPos, yPos);
}
}
context.lineWidth = 2;
context.strokeStyle = "black";
context.stroke();
context.fillStyle="black";
context.fill();
context.closePath();
//Hands - Right Hand
var imageObjEricRightHand = new Image();
imageObjEricRightHand.onload = function() {
context.drawImage(imageObjEricRightHand, 10, 322);
};
imageObjEricRightHand.src="RightHandCartman.png";
//Zipper
context.beginPath();
context.moveTo(131,436);
context.lineTo(134,384);
context.stroke();
context.closePath();
//KYLE - KYLE - KYLE - KYLE - KYLE - KYLE - KYLE - KYLE - KYLE
//::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
//Pants
context.beginPath();
context.rect(216, 445, 90, 20);
context.fillStyle ="#2f4f4c";
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
//Body - Sweatshirt Pt. 2
context.beginPath();
context.moveTo(215,387);
context.bezierCurveTo(210,390,200,400,195,430);
context.lineTo(210,430);
context.lineTo(205,445);
context.bezierCurveTo(220,460,300,460,310,452);
context.lineTo(310,435);
context.lineTo(325,435);
context.bezierCurveTo(320,420,320,400,310,390);
context.stroke();
context.fillStyle="#fe6110";
context.fill();
context.closePath();
//Pocket 1
context.beginPath();
context.rect(230, 416, 20, 20);
//context.moveTo(200,300);
context.lineTo(240,425);
context.lineTo(250,415);
context.fillStyle ="#2f4f4c";
//context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
//Pocket 2
context.beginPath();
context.rect(273,416, 20, 20);
//context.moveTo(200,300);
context.lineTo(283,427);
context.lineTo(294,415);
context.fillStyle ="#2f4f4c";
//context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
//Body - Sweatshirt Pt. 1
var centerXKyleScarf = canvas.width / 3.45;
var centerYKyleScarf = canvas.height / 1.50;
context.beginPath();
for (var i = 0 * Math.PI; i < 2 * Math.PI; i += 0.01 ) {
xPos = centerXKyleScarf - (43 * Math.sin(i)) * Math.sin(1.02 * Math.PI) + (55 * Math.cos(i)) * Math.cos(1.02 * Math.PI);
yPos = centerYKyleScarf + (55 * Math.cos(i)) * Math.sin(1.02 * Math.PI) + (43 * Math.sin(i)) * Math.cos(1.02 * Math.PI);
if (i == 0) {
context.moveTo(xPos, yPos);
} else {
context.lineTo(xPos, yPos);
}
}
context.lineWidth = 1;
context.strokeStyle = "#232323";
context.stroke();
context.fillStyle="#229a38";
context.fill();
context.closePath();
//Head
var centerXKyleHead = canvas.width / 3.45;
var centerYKyleHead = canvas.height / 1.59;
context.beginPath();
for (var i = 0 * Math.PI; i < 2 * Math.PI; i += 0.01 ) {
xPos = centerXKyleHead - (57 * Math.sin(i)) * Math.sin(0 * Math.PI) + (67 * Math.cos(i)) * Math.cos(0 * Math.PI);
yPos = centerYKyleHead + (67 * Math.cos(i)) * Math.sin(0 * Math.PI) + (57 * Math.sin(i)) * Math.cos(0 * Math.PI);
if (i == 0) {
context.moveTo(xPos, yPos);
} else {
context.lineTo(xPos, yPos);
}
}
context.lineWidth = 1;
context.strokeStyle = "#232323";
context.fillStyle="#fbd9b4";
context.fill();
context.stroke();
context.closePath();
//Hat Pt. 1
var rectWidth = 130;
var rectHeight = 59;
var rectX = 190;
var rectY = 193;
var cornerRadius = 10;
// translate context to center of canvas
context.translate(50 / 2, 100 / 2);
// rotate 45 degrees clockwise
context.rotate(Math.PI / 55);
context.beginPath();
context.moveTo(rectX, rectY);
context.lineTo(rectX + rectWidth - cornerRadius, rectY);
context.arcTo(rectX + rectWidth, rectY, rectX + rectWidth, rectY + cornerRadius, cornerRadius);
context.lineTo(rectX + rectWidth, rectY + rectHeight);
context.lineTo(185,245);
context.lineTo(185,205);
context.bezierCurveTo(185,195,190,195,195,193);
context.lineWidth = 1;
context.fillStyle="#57c426";
context.fill();
context.stroke();
//Hat Pt. 2
context.beginPath()
context.moveTo(310,217);
context.lineTo(195,218);
context.lineTo(195,259);
context.bezierCurveTo(220,247,290,250,312,255);
context.lineTo(310,217);
context.stroke();
context.fillStyle="#229a38";
context.fill();
context.closePath();
//Hat Pt. 3
var centerXKyleHat = canvas.width / 2.78;
var centerYKyleHat = canvas.height / 2;
context.beginPath();
for (var i = 0 * Math.PI; i < 2 * Math.PI; i += 0.01 ) {
xPos = centerXKyleHat - (10 * Math.sin(i)) * Math.sin(1.27 * Math.PI) + (22 * Math.cos(i)) * Math.cos(1.27 * Math.PI);
yPos = centerYKyleHat + (38 * Math.cos(i)) * Math.sin(1.27 * Math.PI) + (19 * Math.sin(i)) * Math.cos(1.27 * Math.PI);
if (i == 0) {
context.moveTo(xPos, yPos);
} else {
context.lineTo(xPos, yPos);
}
}
context.lineWidth = 1;
context.strokeStyle = "#232323";
context.stroke();
context.fillStyle="#57c426";
context.fill();
context.closePath();
//Hat Pt. 4
var centerXKyleHat = canvas.width / 4.9;
var centerYKyleHat = canvas.height / 2;
context.beginPath();
for (var i = 0 * Math.PI; i < 2 * Math.PI; i += 0.01 ) {
xPos = centerXKyleHat - (10 * Math.sin(i)) * Math.sin(.68 * Math.PI) + (22 * Math.cos(i)) * Math.cos(.68 * Math.PI);
yPos = centerYKyleHat + (36 * Math.cos(i)) * Math.sin(.68 * Math.PI) + (19 * Math.sin(i)) * Math.cos(.68 * Math.PI);
if (i == 0) {
context.moveTo(xPos, yPos);
} else {
context.lineTo(xPos, yPos);
}
}
context.lineWidth = 1;
context.strokeStyle = "#232323";
context.stroke();
context.fillStyle="#57c426";
context.fill();
context.closePath();
//Right Eye
var centerXKyleRightEye = canvas.width / 3.88;
var centerYKyleRightEye = canvas.height / 2;
context.beginPath();
for (var i = 0 * Math.PI; i < 2 * Math.PI; i += 0.01 ) {
xPos = centerXKyleRightEye - (19 * Math.sin(i)) * Math.sin(0.7 * Math.PI) + (23 * Math.cos(i)) * Math.cos(0.7 * Math.PI);
yPos = centerYKyleRightEye + (23 * Math.cos(i)) * Math.sin(0.7 * Math.PI) + (19 * Math.sin(i)) * Math.cos(0.7 * Math.PI);
if (i == 0) {
context.moveTo(xPos, yPos);
} else {
context.lineTo(xPos, yPos);
}
}
context.lineWidth = 2.5;
context.strokeStyle = "#232323";
context.stroke();
context.fillStyle="white";
context.fill();
context.closePath();
//Right Eye Pupil
var centerXKyleRightEyePupil = canvas.width / 3.74;
var centerYKyleRightEyePupil = canvas.height / 1.99;
var radiusKyleRightEyePupil = 1.9;
context.beginPath();
context.arc(centerXKyleRightEyePupil, centerYKyleRightEyePupil, radiusKyleRightEyePupil, 0, 2 * Math.PI, false);
context.fillStyle = 'black';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
//Left Eye
var centerXKyleLeftEye = canvas.width / 3.28;
var centerYKyleLeftEye = canvas.height / 2;
context.beginPath();
for (var i = 0 * Math.PI; i < 2 * Math.PI; i += 0.01 ) {
xPos = centerXKyleLeftEye - (19 * Math.sin(i)) * Math.sin(1.2 * Math.PI) + (23 * Math.cos(i)) * Math.cos(1.2 * Math.PI);
yPos = centerYKyleLeftEye + (23 * Math.cos(i)) * Math.sin(1.2 * Math.PI) + (19 * Math.sin(i)) * Math.cos(1.2 * Math.PI);
if (i == 0) {
context.moveTo(xPos, yPos);
} else {
context.lineTo(xPos, yPos);
}
}
context.lineWidth = 2.5;
context.strokeStyle = "#232323";
context.stroke();
context.fillStyle="white";
context.fill();
context.closePath();
//Left Eye Pupil
var centerXKyleLeftEyePupil = canvas.width / 3.4;
var centerYKyleLeftEyePupil = canvas.height / 1.995;
var radiusKyleLeftEyePupil = 1.9;
context.beginPath();
context.arc(centerXKyleLeftEyePupil, centerYKyleLeftEyePupil, radiusKyleLeftEyePupil, 0, 2 * Math.PI, false);
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
context.fillStyle = 'black';
context.fill();
//Mouth
var imageObjKyle = new Image();
imageObjKyle.onload = function() {
context.drawImage(imageObjKyle, 245, 313);
};
imageObjKyle.src="mouthkyle.png";
//Hands - Right Hand
var centerXKyleRightHand = canvas.width / 4.5;
var centerYKyleRightHand = canvas.height / 1.457;
var radiusKyleRightHand = 11;
context.beginPath();
context.arc(centerXKyleRightHand, centerYKyleRightHand, radiusKyleRightHand, 0, 2 * Math.PI, false);
context.fillStyle = '#57c526';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
//Hands - Left Hand
var centerXKyleLeftHand = canvas.width / 2.86;
var centerYKyleLeftHand = canvas.height / 1.46;
var radiusKyleLeftHand = 11;
context.beginPath();
context.arc(centerXKyleLeftHand, centerYKyleLeftHand, radiusKyleLeftHand, 0, 2 * Math.PI, false);
context.fillStyle = '#57c526';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
//Hands - Right Thumb
var centerXKyleRightThumb = canvas.width / 4.3;
var centerYKyleRightThumb = canvas.height / 1.477;
var radiusKyleRightThumb = 4;
context.beginPath();
context.arc(centerXKyleRightThumb, centerYKyleRightThumb, radiusKyleRightThumb, 0, 2 * Math.PI, false);
context.fillStyle = '#57c526';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
//Hands - Left Thumb
//Hands - Left Hand
var centerXKyleLeftThumb = canvas.width / 2.955;
var centerYKyleLeftThumb = canvas.height / 1.47;
var radiusKyleLeftThumb = 4;
context.beginPath();
context.arc(centerXKyleLeftThumb, centerYKyleLeftThumb, radiusKyleLeftThumb, 0, 2 * Math.PI, false);
context.fillStyle = '#57c526';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
//Feet
var centerXKyleFeet = canvas.width / 3.46;
var centerYKyleFeet = canvas.height / 1.37;
context.beginPath();
for (var i = 0 * Math.PI; i < 2 * Math.PI; i += 0.01 ) {
xPos = centerXKyleFeet - (10 * Math.sin(i)) * Math.sin(.99 * Math.PI) + (56 * Math.cos(i)) * Math.cos(.99 * Math.PI);
yPos = centerYKyleFeet + (56 * Math.cos(i)) * Math.sin(.99 * Math.PI) + (2 * Math.sin(i)) * Math.cos(.99 * Math.PI);
if (i == 0) {
context.moveTo(xPos, yPos);
} else {
context.lineTo(xPos, yPos);
}
}
context.lineWidth = 2;
context.strokeStyle = "black";
context.stroke();
context.fillStyle="black";
context.fill();
context.closePath();
//Zipper
context.beginPath();
context.moveTo(260,394);
context.lineTo(257,347);
context.lineWidth="1";
context.stroke();
context.closePath();
//KYLE - END - KYLE - END - KYLE - END - KYLE - END - KYLE
//::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
//// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< END HERE
</script>
</body>
</html>
No comments:
Post a Comment