This project was extremely challenging and frustrating. I had issues with the chart and the points my lines were supposed to go, and the direction they actually went. Another frustrating aspect was coding, saving, then checking and having a minor error in the code that messed up the entire image. My besier curve was another struggle, and the mouth did not come out as I had intended. The last struggle was the pokeball, I couldn't not get the color of the smallest circle to be white which was annoying. Overall I am happy with how it turned out.
file:///Users/Clay/Documents/Picture.html
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
//Background
context.beginPath();
context.rect(0, 0, 800, 600);
//fill
context.fillStyle = 'rgb(19, 229, 68)';
context.fill();
context.stroke();
//Picachu Tail
//Quadratic Curve
context.beginPath();
context.moveTo(360, 110)
context.quadraticCurveTo(280, 100, 205, 120);
context.quadraticCurveTo(200, 210, 210, 200);
context.lineTo(325, 175);
context.lineTo(325, 215);
context.lineTo(345, 210);
context.quadraticCurveTo(345, 205, 355, 190)
context.lineTo(345, 190);
context.quadraticCurveTo(340, 180, 360, 110);
context.fillStyle = 'rgb(255, 255, 0)';
context.fill();
context.stroke();
//Head
context.beginPath();
context.moveTo(345, 210)
context.quadraticCurveTo(360, 180, 375, 150);
context.quadraticCurveTo(350, 100, 380, 50);
context.quadraticCurveTo(410, 80, 415, 135);
context.quadraticCurveTo(485, 120, 515, 160);
context.quadraticCurveTo(560, 140, 610, 160);
context.quadraticCurveTo(580, 193, 520, 195);
context.quadraticCurveTo(520, 215, 505, 250);
context.quadraticCurveTo(460, 325, 380, 290);
context.quadraticCurveTo(330, 255, 345, 210);
context.fill();
context.stroke();
//body
context.beginPath();
context.moveTo(345, 387);
context.lineTo(330, 450);
context.lineTo(530, 450);
context.quadraticCurveTo(490, 420, 490, 385);
context.quadraticCurveTo(530, 405, 560, 410);
context.quadraticCurveTo(580, 410, 570, 390);
context.quadraticCurveTo(480, 280, 465, 292);
context.quadraticCurveTo(418, 310, 380, 290);
context.quadraticCurveTo(353, 270, 350, 260);
context.lineTo(330, 300);
context.fill();
context.stroke();
//Left Arm
context.beginPath();
context.moveTo(350, 259);
context.quadraticCurveTo(265, 315, 310, 370);
context.quadraticCurveTo(345, 405, 380, 370);
context.quadraticCurveTo(420, 330, 370, 325);
context.quadraticCurveTo(345, 320, 340, 325);
context.fill();
context.stroke();
//Black right eye
context.beginPath();
context.arc(465, 220, 12, 0, 2*Math.PI, true);
context.fillStyle = 'rgb(0, 0, 0)';
context.fill();
context.stroke();
//context.stroke();
//Black Left eye
context.beginPath();
context.arc(400, 200, 12, 0, 2*Math.PI, true);
context.fillStyle = 'rgb(0, 0, 0)';
context.fill();
context.stroke();
//context.stroke();
//white right eye
context.beginPath();
context.arc(463, 214, 6, 0, 2*Math.PI, true);
context.fillStyle = 'rgb(255, 255, 255)';
context.fill();
context.stroke();
//context.stroke();
//white Left eye
context.beginPath();
context.arc(405, 196, 6, 0, 2*Math.PI, true);
context.fillStyle = 'rgb(255, 255, 255)';
context.fill();
context.stroke();
//context.stroke();
//nose
context.beginPath();
context.moveTo(425, 229);
context.lineTo(415, 224);
context.lineTo(415, 232);
context.lineTo(425, 229);
context.fillStyle = 'rgb(0, 0, 0)';
context.fill();
context.stroke();
//nose
//mouth
//Bezier Curve
context.beginPath();
context.moveTo(380, 230);
context.bezierCurveTo(370, 255, 390, 280, 440, 260);
context.stroke();
//mouth
//left cheek
context.beginPath();
context.arc(358, 225, 16, 0, 2*Math.PI, true);
context.fillStyle = 'rgb(247, 6, 6)';
context.fill();
context.stroke();
//context.stroke();
//right cheek
context.beginPath();
context.arc(465, 270, 16, 0, 2*Math.PI, true);
context.fillStyle = 'rgb(247, 6, 6)';
context.fill();
context.stroke();
//context.stroke();
//left ear
context.beginPath();
context.moveTo(365, 120)
context.quadraticCurveTo(350, 83, 380, 50);
context.quadraticCurveTo(405, 81, 405, 90);
context.fillStyle = 'rgb(0, 0, 0)';
context.fill();
context.stroke();
//context.stroke();
//right ear
context.beginPath()
context.moveTo(550, 150)
context.quadraticCurveTo(582, 150, 610, 160);
context.quadraticCurveTo(570, 195, 540, 193);
context.fillStyle = 'rgb(0, 0, 0)';
context.fill();
context.stroke();
//bottom half of pokeball
context.beginPath();
context.arc(200, 300, 70, 0, 2*Math.PI, false);
context.fillStyle = 'rgb(255, 255, 255)';
context.fill();
context.stroke();
//context.stroke
//top pokeball
context.beginPath();
context.arc(200, 300, 70, 0, Math.PI, true);
context.fillStyle = 'rgb(255, 6, 0)';
context.fill();
context.stroke();
//context.stroke();
//middle line pokeball
context.beginPath();
context.moveTo(144,300);
context.lineTo(255,300)
context.lineWidth = 30;
context.lineCap = 'round'
context.strokeStyle = 'rgba(0, 0, 0, 1)';
context.stroke();
//context.stroke
//pokeball circle
context.beginPath();
context.arc(200, 300, 10, 0, 2*Math.PI, false);
context.fillStyle = 'rgb(0, 0, 100)';
context.fill();
context.stroke();
//context.stroke
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
No comments:
Post a Comment