Canvas detective conan-canvas exercises, canvas-canvas

Canvas detective conan-canvas exercises, canvas-canvas

Var canvas = document. getElementById ("canvas"); var ctx = canvas. getContext ("2d"); // face ctx. beginPath (); ctx. moveTo (205,410); ctx. lineTo (307,550); ctx. lineTo (334,574); ctx. lineTo (485,640); ctx. lineTo (530,620); ctx. lineTo (645,530); ctx. lineTo (670,500); ctx. lineTo (730,300); ctx. strokeStyle = "#262829"; ctx. lineWidth = 3; ctx. stroke (); // glasses // ctx on the right frame. beginPath (); ctx. moveTo (735,415); ctx. lineTo (735,315); ctx. lineTo (525,330); ctx. lineTo (525,430); ctx. stroke (); ctx. beginPath (); ctx. moveTo (735,355); ctx. lineTo (725,325); ctx. lineTo (535,340); ctx. lineTo (525,390); ctx. stroke (); ctx. beginPath (); ctx. arc( 630,415,105, 0, Math. PI); ctx. stroke (); // connects ctx. beginPath (); ctx. moveTo (525,398); ctx. lineTo (450,400); ctx. stroke (); ctx. beginPath (); ctx. moveTo (525,383); ctx. lineTo (450,387); ctx. stroke (); // ctx on the left frame. beginPath (); ctx. moveTo (450,415); ctx. lineTo (450,335); ctx. lineTo (205,340); ctx. lineTo (205,440); ctx. stroke (); ctx. beginPath (); ctx. moveTo (448,415); ctx. lineTo (430,350); ctx. lineTo (215,350); ctx. lineTo (205,375); ctx. stroke (); ctx. beginPath (); ctx. arc( 327,405,123, 0, Math. PI); ctx. stroke (); // left eyebrow ctx. beginPath (); ctx. moveTo (435,385); ctx. lineTo (280,320); ctx. lineTo (424,390); ctx. closePath (); ctx. stroke (); // ctx on the left eyelashes. beginPath (); ctx. moveTo (270,350); ctx. lineTo (230,385); ctx. lineTo (235,393); ctx. lineTo (285,350); ctx. closePath (); ctx. stroke (); // ctx in the left eye. beginPath (); ctx. moveTo (235,393); ctx. lineTo (255,425); ctx. lineTo (305,440); ctx. lineTo (390,430); ctx. lineTo (410,405); ctx. lineTo (410,385); ctx. stroke (); ctx. beginPath (); ctx. arc( 335,430, 50, Math. PI * 0.965, 0); ctx. stroke (); ctx. beginPath (); ctx. arc (320,407, Math. PI * 2); ctx. stroke (); ctx. beginPath (); ctx. moveTo (355,385); ctx. lineTo (335,425); ctx. lineTo (350,430); ctx. lineTo (370,395); ctx. stroke (); // right eyebrow ctx. beginPath (); ctx. moveTo (547,380); ctx. lineTo (667,290); ctx. lineTo (550,365); ctx. closePath (); ctx. stroke (); // ctx on the right eyelashes. beginPath (); ctx. moveTo (550,388); ctx. lineTo (630,335); ctx. lineTo (675,329); ctx. lineTo (700,359); ctx. lineTo (695,365); ctx. lineTo (665,329); ctx. stroke (); // ctx in the right eye. beginPath (); ctx. moveTo (560,380); ctx. lineTo (570,420); ctx. lineTo (645,425); ctx. lineTo (685,405); ctx. lineTo (690,360); ctx. stroke (); ctx. beginPath (); ctx. arc( 625,410, 45, Math. PI * 0.91, 0); ctx. stroke (); ctx. beginPath (); ctx. arc (610,390, Math. PI * 2); ctx. stroke (); ctx. beginPath (); ctx. moveTo (635,365); ctx. lineTo (625,405); ctx. lineTo (635,410); ctx. lineTo (647,370); ctx. stroke (); // mouth ctx. beginPath (); ctx. moveTo (465,550); ctx. lineTo (505,545); ctx. lineTo (511,546); ctx. stroke (); // nose ctx. beginPath (); ctx. moveTo (480,490); ctx. lineTo (495,495); ctx. lineTo (505,485); ctx. lineTo (505,465); ctx. lineTo (490,475); ctx. closePath (); ctx. stroke (); // ctx in the left ear. beginPath (); ctx. moveTo (205,395); ctx. lineTo (170,380); ctx. stroke (); ctx. beginPath (); ctx. arc (165,400, * Math. PI, 1.6 * Math. PI); ctx. stroke (); ctx. beginPath (); ctx. moveTo (145,400); ctx. lineTo (147,460); ctx. lineTo (220,535); ctx. lineTo (260,550); ctx. lineTo (308,550); ctx. stroke (); ctx. beginPath (); ctx. arc (260,410, 90, Math. PI * 0.55, Math. PI); ctx. stroke (); ctx. beginPath (); ctx. moveTo (160,410); ctx. lineTo (180,410); ctx. lineTo (205,430); ctx. stroke (); // hair ctx. beginPath (); ctx. moveTo (260,0); ctx. quadraticCurveTo (76,174,150,380); ctx. stroke (); ctx. beginPath (); ctx. moveTo (155,140); ctx. lineTo (85, 0); ctx. lineTo (60,130); ctx. lineTo (135,190); ctx. lineTo (50,180); ctx. lineTo (134,210); ctx. stroke (); // bangs ctx. beginPath (); ctx. moveTo (780, 0); ctx. quadraticCurveTo (915, 80,900,155); ctx. stroke (); ctx. beginPath (); ctx. moveTo (730, 60); ctx. quadraticCurveTo (880, 80,900,155); ctx. stroke (); ctx. beginPath (); ctx. moveTo (730, 60); ctx. quadraticCurveTo (950,200,805,345); ctx. stroke (); ctx. beginPath (); ctx. moveTo (780,190); ctx. quadraticCurveTo (810,275,805,345); ctx. stroke (); ctx. beginPath (); ctx. moveTo (780,190); ctx. quadraticCurveTo (810,275,770,365); ctx. stroke (); ctx. beginPath (); ctx. moveTo (780,270); ctx. quadraticCurveTo (790,275,770,365); ctx. stroke (); ctx. beginPath (); ctx. moveTo (780,270); ctx. quadraticCurveTo (790,275,750,365); ctx. stroke (); ctx. beginPath (); ctx. moveTo (750,270); ctx. quadraticCurveTo (760,265,750,365); ctx. stroke (); ctx. beginPath (); ctx. moveTo (750,270); ctx. quadraticCurveTo (760,265,740,355); ctx. stroke (); ctx. beginPath (); ctx. moveTo (720,270); ctx. quadraticCurveTo (730,255,740,355); ctx. stroke (); ctx. beginPath (); ctx. moveTo (720,270); ctx. quadraticCurveTo (730,255,700,355); ctx. stroke (); ctx. beginPath (); ctx. moveTo (650,180); ctx. quadraticCurveTo (720,225,700,355); ctx. stroke (); ctx. beginPath (); ctx. moveTo (650,180); ctx. quadraticCurveTo (660,195,675,315); ctx. stroke (); ctx. beginPath (); ctx. moveTo (620,170); ctx. quadraticCurveTo (660,195,675,315); ctx. stroke (); ctx. beginPath (); ctx. moveTo (620,170); ctx. quadraticCurveTo (620,324,595,323); ctx. stroke (); ctx. beginPath (); ctx. moveTo (610,190); ctx. quadraticCurveTo (615,324,595,323); ctx. stroke (); ctx. beginPath (); ctx. moveTo (610,190); ctx. quadraticCurveTo (560,324,440,393); ctx. stroke (); ctx. beginPath (); ctx. moveTo (555,220); ctx. quadraticCurveTo (560,324,440,393); ctx. stroke (); ctx. beginPath (); ctx. moveTo (555,220); ctx. quadraticCurveTo (560,324,360,393); ctx. stroke (); ctx. beginPath (); ctx. moveTo (435,220); ctx. quadraticCurveTo (435,324,360,393); ctx. stroke (); ctx. beginPath (); ctx. moveTo (435,220); ctx. quadraticCurveTo (390,314,390,353); ctx. stroke (); ctx. beginPath (); ctx. moveTo (395,260); ctx. quadraticCurveTo (380,314,390,353); ctx. stroke (); ctx. beginPath (); ctx. moveTo (395,260); ctx. quadraticCurveTo (370,314,290,343); ctx. stroke (); ctx. beginPath (); ctx. moveTo (355,260); ctx. quadraticCurveTo (340,314,290,343); ctx. stroke (); ctx. beginPath (); ctx. moveTo (355,260); ctx. quadraticCurveTo (310,314,220,343); ctx. stroke (); ctx. beginPath (); ctx. moveTo (315,260); ctx. quadraticCurveTo (300,314,220,343); ctx. stroke (); ctx. beginPath (); ctx. moveTo (315,260); ctx. quadraticCurveTo (280,314,200,343); ctx. stroke (); ctx. beginPath (); ctx. moveTo (280,260); ctx. quadraticCurveTo (240,314,205,343); ctx. stroke (); ctx. beginPath (); ctx. moveTo (280,260); ctx. quadraticCurveTo (210,314,205,343); ctx. stroke (); // name ctx. font = "bold 50px Arial"; ctx. strokeText ("zookeeper has zookeeper installed", 620,600 );

HTML

<canvas id="canvas" width="1000" height="700"></canvas>

CSS

canvas{                display: block;                margin: 100px 0 0 460px;                box-shadow: 20px 20px  100px black;            }