<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
//backgorund
context.beginPath();
context.rect(0,0,800,600);
context.lineWidth = 5;
context.strokeStyle = 'rgb(0,0,0)';
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.stroke();
//red rectangle
context.beginPath();
context.moveTo(200,200);
context.quadraticCurveTo(225,350,300,600);
context.quadraticCurveTo(400,525,500,500);
context.quadraticCurveTo(520,325,525,175);
context.quadraticCurveTo(350,150,200,200);
context.lineCap = 'round';
context.lineWidth = .5;
context.strokeStyle = 'rgb(193, 27, 23)';
var grd = context.createLinearGradient(200,250,525,175);
grd.addColorStop(0,'rgb(128, 5, 23)');
grd.addColorStop(.25,'rgb(193, 27, 23)');
grd.addColorStop(.5,'rgb(255,0,0)');
grd.addColorStop(1,'rgb(193, 27, 23)');
context.fillStyle = grd;
context.fill();
context.stroke();
//white face oval
context.beginPath();
context.arc(365, 180, 120, 50, Math.PI, false);
context.closePath();
context.lineWidth = 5;
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.strokeStyle = 'rgb(255,255,255)';
context.stroke();
//tie right
context.beginPath();
context.moveTo(375,305);
context.lineTo(440,325);
context.lineTo(440,270);
context.lineTo(375,305);
context.lineWidth = 5;
context.strokeStyle = 'rgb(0,0,0)';
var grd = context.createLinearGradient(350,305,444,325);
grd.addColorStop(1,'rgb(0,0,0)');
grd.addColorStop(.65,'rgb(200, 5, 23)');
context.fillStyle = grd
context.fill();
context.lineCap = 'round';
context.stroke();
//face border left side
context.beginPath();
context.moveTo(265,150);
context.bezierCurveTo(220,200,245,265,310,290);
context.bezierCurveTo(320,290,220,250,265,150);
context.fillStyle = 'rgb(0,0,0)';
context.fill();
context.stroke();
//face border right side
context.beginPath();
context.moveTo(450,135);
context.bezierCurveTo(515,160,500,260,442,273);
context.bezierCurveTo(485,260,500,170,450,135);
context.fillStyle = 'rgb(0,0,0)';
context.fill();
context.stroke();
//tie left
context.beginPath();
context.moveTo(375,305);
context.lineTo(300,275);
context.lineTo(310,335);
context.lineTo(375,305);
context.lineWidth = 5;
context.strokeStyle = 'rgb(0,0,0)';
var grd = context.createLinearGradient(300,310,365,305);
grd.addColorStop(0,'rgb(0,0,0)');
grd.addColorStop(.3,'rgb(128, 5, 23)');
grd.addColorStop(.5,'rgb(200, 5, 23)');
grd.addColorStop(1,'rgb(193, 27, 23)');
context.fillStyle = grd
context.fill();
context.lineCap = 'round';
context.stroke();
//right side 2 hair loop curve
context.beginPath();
context.moveTo(390,110);
context.quadraticCurveTo(405,110,435,125);
context.bezierCurveTo(450,70,355,90,390,110);
var grd = context.createLinearGradient(355,140,430,90);
grd.addColorStop(.5,'rgb(200, 90, 36)');
grd.addColorStop(.7,'rgb(171, 86, 36)');
grd.addColorStop(1,'rgb(97, 39, 5)');
context.fillStyle = grd
context.fill();
context.lineCap = 'round';
context.stroke();
//right side hair loop Curve
context.beginPath();
context.moveTo(355,109);
context.bezierCurveTo(390,115,413,113,420,135);
context.bezierCurveTo(445,120,400,70,355,109);
var grd = context.createLinearGradient(355,140,420,100);
grd.addColorStop(0,'rgb(97,39,5)');
grd.addColorStop(.3,'rgb(154, 67, 16)');
grd.addColorStop(.5,'rgb(200, 90, 36)');
grd.addColorStop(.7,'rgb(171, 86, 36)');
grd.addColorStop(1,'rgb(97, 39, 5)');
context.fillStyle = grd
context.fill();
context.lineCap = 'round';
context.stroke();
//left side 2 hair loop curve
context.beginPath();
context.moveTo(320,120);
context.quadraticCurveTo(305,120,275,140);
context.bezierCurveTo(260,85,355,95,320,120);
var grd = context.createLinearGradient(320,120,275,125);
grd.addColorStop(.5,'rgb(200, 90, 36)');
grd.addColorStop(.7,'rgb(171, 86, 36)');
grd.addColorStop(1,'rgb(97, 39, 5)');
context.fillStyle = grd
context.fill();
context.lineCap = 'round';
context.stroke();
//left side hair loop Curve
context.beginPath();
context.moveTo(355,109);
context.bezierCurveTo(320,125,295,125,295,150);
context.bezierCurveTo(265,130,310,80,355,109);
var grd = context.createLinearGradient(355,140,295,150);
grd.addColorStop(.5,'rgb(200, 90, 36)');
grd.addColorStop(.7,'rgb(171, 86, 36)');
grd.addColorStop(1,'rgb(97, 39, 5)');
context.fillStyle = grd
context.fill();
context.lineCap = 'round';
context.stroke();
//letter P
context.beginPath();
context.moveTo(155,390);
context.lineTo(165,407);
context.lineTo(180,400);
context.lineTo(250,550);
context.lineTo(270,540);
context.lineTo(243,473);
context.moveTo(243,473);
context.bezierCurveTo(300,425,250,330,155,390);
context.fillStyle = 'rgb(255,255,0)';
context.fill();
context.lineWidth = 9;
context.stroke();
context.beginPath();
context.moveTo(207,400);
context.lineTo(230,447);
context.moveTo(230,447);
context.bezierCurveTo(255,435,242,390,207,400);
context.fillStyle = 'rgb(0,0,0)';
context.fill();
context.lineWidth = 9;
context.stroke();
//letter r
context.beginPath();
context.moveTo(264,395);
context.lineTo(300,500);
context.lineTo(317,490);
context.bezierCurveTo(283,410,300,405,308,400);
context.lineTo(305,380);
context.bezierCurveTo(290,374,280,397,282,395);
context.lineTo(277,385);
context.lineTo(264,395);
context.closePath();
context.lineWidth = 8;
context.fillStyle = 'rgb(255,255,0)';
context.fill();
context.stroke();
//letter i
context.beginPath();
context.moveTo(311,387);
context.lineTo(335,480);
context.lineTo(352,470);
context.lineTo(330,373);
context.moveTo(330,373);
context.quadraticCurveTo(323,385,311,387);
context.fillStyle = 'rgb(255,255,0)';
context.fill();
context.lineWidth = 8;
context.stroke();
context.beginPath();
context.arc(312,362,9, 0 , 2 * Math.PI, false);
context.fillStyle = 'rgb(255,255,0)';
context.fill();
context.lineWidth = 7;
context.stroke();
//letter n
context.beginPath();
context.moveTo(338,370);
context.lineTo(360,467);
context.lineTo(373,460);
context.lineTo(360,390);
context.quadraticCurveTo(365,375,372,388);
context.lineTo(383,454);
context.lineTo(396,449);
context.lineTo(384,379);
context.bezierCurveTo(378,365,365,360,355,375);
context.lineTo(352,363);
context.lineTo(338,370);
context.lineWidth = 8;
context.fillStyle = 'rgb(255,255,0)';
context.fill();
context.stroke();
//letter g
context.beginPath();
context.moveTo(430,360);
context.bezierCurveTo(425,350,405,345,398,365);
context.bezierCurveTo(388,390,398,465,430,430);
context.bezierCurveTo(430,475,430,500,410,485);
context.lineTo(407,500);
context.moveTo(407,500);
context.bezierCurveTo(410,500,430,525,443,483);
context.lineTo(448,345);
context.lineTo(431,345);
context.lineTo(430,360);
context.lineWidth = 8;
context.fillStyle = 'rgb(255,255,0)';
context.fill();
context.stroke();
context.beginPath();
context.moveTo(426,375);
context.bezierCurveTo(410,366,412,430,425,410);
context.lineWidth = 8;
context.lineTo(426,375);
context.fillStyle = 'rgb(0,0,0)';
context.fill();
context.stroke();
//letter l
context.beginPath();
context.moveTo(458,323);
context.lineTo(454,442);
context.lineTo(470,442);
context.lineTo(477,323);
context.lineTo(460,323);
context.fillStyle = 'rgb(255,255,0)';
context.fill();
context.lineWidth = 9;
context.stroke();
//letter e
context.beginPath();
context.moveTo(497,405);
context.bezierCurveTo(525,400,535,360,526,349);
context.bezierCurveTo(515,334,500,330,486,355);
context.bezierCurveTo(477,370,465,465,525,440);
context.lineTo(523,422);
context.moveTo(523,422);
context.bezierCurveTo(510,427,497,431,497,405);
context.lineWidth = 8;
context.fillStyle = 'rgb(255,255,0)';
context.fill();
context.stroke();
context.beginPath();
context.moveTo(497,387);
context.bezierCurveTo(505,380,515,375,513,360);
context.bezierCurveTo(496,342,495,380,497,387);
context.lineWidth = 5;
context.fillStyle = 'rgb(0,0,0)';
context.fill();
context.stroke();
//letter s
context.beginPath();
context.moveTo(587,365);
context.bezierCurveTo(550,335,530,360,545,395);
context.bezierCurveTo(565,430,550,447,530,425);
context.lineTo(531,445);
context.moveTo(531,445);
context.bezierCurveTo(550,465,583,447,570,413);
context.bezierCurveTo(560,390,550,355,580,380);
context.lineTo(587,365);
context.lineWidth = 8;
context.fillStyle = 'rgb(255,255,0)';
context.fill();
context.stroke();
//whisker right
context.beginPath();
context.moveTo(380,210);
context.bezierCurveTo(400,160,449,215,450,180);
context.moveTo(450,180);
context.bezierCurveTo(475,230,400,250,380,210);
var grd = context.createLinearGradient(385,210,450,210);
grd.addColorStop(0,'rgb(97,39,5)');
grd.addColorStop(.3,'rgb(154, 67, 16)');
grd.addColorStop(.5,'rgb(171, 86, 36)');
grd.addColorStop(.7,'rgb(154, 67, 16)');
grd.addColorStop(1,'rgb(97, 39, 5)');
context.fillStyle = grd
context.fill();
context.moveTo(380,210);
context.bezierCurveTo(420,180,440,225,452,189);
context.moveTo(383,215);
context.bezierCurveTo(410,195,435,245,455,195);
context.lineWidth = 4;
context.stroke();
//whisker left
context.beginPath();
context.moveTo(380,210);
context.bezierCurveTo(325,150,312,225,290,197);
context.moveTo(290,197);
context.bezierCurveTo(300,250,365,250,380,210);
var grd = context.createLinearGradient(378,210,290,210);
grd.addColorStop(0,'rgb(97,39,5)');
grd.addColorStop(.3,'rgb(154, 67, 16)');
grd.addColorStop(.5,'rgb(171, 86, 36)');
grd.addColorStop(.7,'rgb(171, 86, 36)');
grd.addColorStop(1,'rgb(154, 67, 16)');
context.fillStyle = grd
context.fill();
context.moveTo(380,210);
context.bezierCurveTo(315,177,322,245,290,200);
context.moveTo(377,215);
context.bezierCurveTo(328,203,343,247,299,218);
context.lineWidth = 4;
context.stroke();
//left eye
context.beginPath();
context.moveTo(330,140);
context.quadraticCurveTo(325,150,330,160);
context.quadraticCurveTo(335,170,340,160);
context.quadraticCurveTo(345,150,340,140);
context.quadraticCurveTo(335,130,330,140);
context.lineWidth = 4;
context.fillStyle = 'rgb(0,0,0)';
context.fill();
context.stroke();
// left white eye
context.beginPath();
context.arc(336, 149,5, 0 , 2 * Math.PI, false);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.lineWidth = 2;
context.stroke();
//right eye
context.beginPath();
context.moveTo(390,140);
context.quadraticCurveTo(385,150,390,160);
context.quadraticCurveTo(395,170,400,160);
context.quadraticCurveTo(405,150,400,140);
context.quadraticCurveTo(395,130,390,140);
context.lineWidth = 4;
context.fillStyle = 'rgb(0,0,0)';
context.fill();
context.stroke();
// right white eye
context.beginPath();
context.arc(394, 149,5, 0 , 2 * Math.PI, false);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.lineWidth = 2;
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
No comments:
Post a Comment