Phineas Head with background
<!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.rect(0,0,800,600);
context.fillStyle = 'blue';
context.fill();
context.stroke();
//hair
context.beginPath();
context.moveTo(100, 210);
context.quadraticCurveTo(100, 125, 175, 75);
context.quadraticCurveTo(125, 60, 75, 115);
context.quadraticCurveTo(128, 35, 175, 15);
context.quadraticCurveTo(210,100,175,115);
context.quadraticCurveTo(210, 90, 75, 15);
context.quadraticCurveTo(200, 50, 175, 115);
context.quadraticCurveTo(150, 70, 75, 115);
context.quadraticCurveTo(50, 80, 175, 15);
context.quadraticCurveTo(50, 80, 175, 75);
context.quadraticCurveTo(50, 90, 75, 115);
context.quadraticCurveTo(25, 125, 175, 75);
context.quadraticCurveTo(180, 220, 75, 115);
context.quadraticCurveTo(150, 100, 175, 75);
context.quadraticCurveTo(60, 101, 75, 115);
context.stroke();
context.fillStyle = 'red';
context.fill();
context.stroke();
context.closePath();
/*context.moveTo(200,100);
context.quadraticCurveTo(200,105, 90, 190);
context.lineTo(170,90);
context.lineTo(190,80);
context.lineTo(140,200);
context.lineTo(200,110);
context.lineTo(190,120);
context.stroke();
context.fillStyle = 'orange';
context.fill();
context.stroke();
context.closePath();
*/
//head shape
context.beginPath();
context.moveTo(300,415);
context.quadraticCurveTo(275,250, 95, 150);
context.quadraticCurveTo(75,125, 100, 120);
context.lineTo(570,120);
context.lineTo(405,300);
context.lineTo(400,301);
context.lineTo(400,305);
context.lineTo(330,415);
context.stroke();
context.fillStyle = 'tan';
context.fill();
context.stroke();
context.closePath();
//mouth
context.beginPath();
context.moveTo(300,250);
context.quadraticCurveTo(350,300, 400, 300);
context.stroke();
//eyes
context.beginPath();
context.arc(300, 100, 50, 0, 2*Math.PI, true);
context.stroke();
context.stroke();
context.fillStyle = 'white';
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.arc(380, 100, 50, 0, 2*Math.PI, true);
context.stroke();
context.stroke();
context.fillStyle = 'white';
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.arc(300, 125, 20, 0, 2*Math.PI, true);
context.stroke();
context.stroke();
context.fillStyle = 'blue';
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.arc(400, 125, 20, 0, 2*Math.PI, true);
context.stroke();
context.fillStyle = 'blue';
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.arc(400, 110, 5, 0, 2*Math.PI, true);
context.stroke();
context.fillStyle = 'white';
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.arc(300, 110, 5, 0, 2*Math.PI, true);
context.stroke();
context.fillStyle = 'white';
context.fill();
context.stroke();
context.closePath();
//ear
context.beginPath()
context.arc(200,250,20,0, 2*Math.PI, true);
context.stroke();
context.fillStyle = 'tan';
context.fill();
context.stroke();
context.closePath();
//dimples
context.beginPath();
context.arc(170, 160, 2, 0, 2*Math.PI, true);
context.stroke();
context.beginPath();
context.arc(160, 150, 2, 0, 2*Math.PI, true);
context.stroke();
context.beginPath();
context.arc(150, 180, 2, 0, 2*Math.PI, true);
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
No comments:
Post a Comment