Coding "Hazel"

Many hours in the computer lab and I am still not quite finished. I do want to turn something in though so here is how far I got. Still missing details like the hands and feet. I'll update the post in a couple of days when everything is done, because I really do want to finish the complete image.

Here's the code so far...

<!DOCTYPE HTML>

<html>

<head>

window.onload = function() {

var canvas = document.getElementById("myCanvas");

var context = canvas.getContext("2d");

////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ

//outline of entire squirrel

context.beginPath();

context.moveTo (248, 123);

context.quadraticCurveTo(260, 60, 280, 55);

context.quadraticCurveTo(295, 50, 325,100);

context.lineTo(355, 100);

context.quadraticCurveTo(405, 45, 420, 50);

context.quadraticCurveTo(440, 65, 450, 125);

context.quadraticCurveTo(475, 100, 540, 105);

context.quadraticCurveTo(620, 110, 640, 175);

context.quadraticCurveTo(660, 275, 550, 300);

context.quadraticCurveTo(600, 350, 585, 400);

context.quadraticCurveTo(570, 480, 440, 500);

context.lineTo(375, 525);

context.quadraticCurveTo(340, 525, 320, 520);

context.quadraticCurveTo(285, 525, 270, 520);

context.quadraticCurveTo(265, 515, 289, 508);

context.quadraticCurveTo(235, 485, 235, 430);

context.quadraticCurveTo(240, 400, 267, 407);

context.lineTo(257, 377);

context.quadraticCurveTo(237, 415, 225, 380);

context.quadraticCurveTo(220, 330, 265, 320);

context.lineTo(277, 303);

context.quadraticCurveTo(220, 300, 203, 257);

context.quadraticCurveTo(198, 235, 215, 210);

context.quadraticCurveTo(210, 140, 248, 123);

context.closePath();

context.fillStyle = "#F9E051";

context.fill();

context.strokeStyle = "#382622";

context.lineWidth = 4;

context.stroke();

//white fur on head

context.beginPath();

context.moveTo(223, 149);

context.quadraticCurveTo(250, 112, 273, 149);

context.quadraticCurveTo(277, 210, 267, 240);

context.quadraticCurveTo(255, 245, 272, 252);

context.lineTo(279, 252);

context.quadraticCurveTo(285, 245, 280, 240);

context.quadraticCurveTo(282, 220, 300, 183);

context.quadraticCurveTo(325, 125, 350, 130);

context.quadraticCurveTo(396, 135, 390, 200);

context.quadraticCurveTo(385, 222, 370, 230);

context.quadraticCurveTo(415, 220, 428, 250);

context.quadraticCurveTo(435, 275, 400, 285);

context.lineTo(375, 292);

context.quadraticCurveTo(390, 317, 387, 325);

context.lineTo(386, 330);

context.lineTo(377, 332);

context.quadraticCurveTo(376, 327, 365, 326);

context.quadraticCurveTo(360, 315, 343, 325);

context.quadraticCurveTo(340, 320, 300, 321);

context.lineTo(285, 322);

context.lineTo(290, 315);

context.lineTo(280, 302);

context.lineTo(272, 302);

context.quadraticCurveTo(225, 295, 213, 275);

context.quadraticCurveTo(200, 250, 212, 240);

context.quadraticCurveTo(207, 236, 207, 224);

context.lineTo(216, 210);

context.quadraticCurveTo(214, 157, 223, 149);

context.closePath();

context.fillStyle = "#EFE7E0";

context.fill();

context.lineWidth = 2.5;

context.stroke();

//white fur on body

context.beginPath();

context.moveTo(430, 400);

context.quadraticCurveTo(390, 435, 380, 510);

context.lineTo(292, 508);

context.quadraticCurveTo(240, 460, 250, 407);

context.lineTo(267, 407);

context.lineTo(256, 376);

context.quadraticCurveTo(240, 418, 224, 375);

context.quadraticCurveTo(242, 368, 250, 356);

context.lineTo(363, 375);

context.lineTo(382, 370);

context.quadraticCurveTo(405, 400, 427, 375);

context.quadraticCurveTo(437, 390, 430, 400);

context.closePath();

context.fillStyle = "#EFE7E0";

context.fill();

context.lineWidth = 2.5;

context.stroke();

//coconut

context.beginPath();

context.moveTo(299, 321);

context.quadraticCurveTo(365, 312, 362, 375);

context.quadraticCurveTo(360, 424, 300, 423);

context.quadraticCurveTo(248, 418, 260, 350);

context.quadraticCurveTo(272, 320, 299, 321);

context.closePath();

context.fillStyle = "#A07048";

context.fill();

context.lineWidth = 3;

context.stroke();

//nose

context.beginPath();

context.moveTo(280, 240);

context.quadraticCurveTo(287, 245, 279, 252);

context.lineTo(272 ,252);

context.quadraticCurveTo(255, 245, 267, 240);

context.lineTo(280, 240);

context.closePath();

context.fillStyle = "#8B6B44";

context.fill();

context.lineWidth = 3;

context.stroke();

//inside of ear

context.beginPath();

context.moveTo(425, 124)

context.quadraticCurveTo(410, 130, 388, 118);

context.quadraticCurveTo(389, 90, 417, 75);

context.quadraticCurveTo(433, 92, 425, 124);

context.closePath();

context.fillStyle = "#DFA081";

context.fill();

context.lineWidth = 3;

context.stroke();

//left ear line

context.beginPath();

context.moveTo(245, 125);

context.quadraticCurveTo(275, 103, 325, 100);

context.lineWidth = 4;

context.stroke();

//Cheeks

context.beginPath();

context.moveTo(208, 252);

context.quadraticCurveTo(231, 249, 234, 268);

context.quadraticCurveTo(233, 278, 215, 278);

context.quadraticCurveTo(207, 264, 208, 252);

context.closePath();

context.fillStyle = "#E39E7D";

context.fill();

context.lineWidth = 1.5;

context.stroke();

context.beginPath();

context.moveTo(415, 250);

context.quadraticCurveTo(423, 260, 400, 268);

context.quadraticCurveTo(386, 273, 375, 268);

context.quadraticCurveTo(357, 262, 373, 250);

context.quadraticCurveTo(396, 237, 415, 250);

context.closePath();

context.fillStyle = "#E39E7D";

context.fill();

context.lineWidth = 1.5;

context.stroke();

//eyes

context.beginPath();

context.moveTo(327, 225);

context.quadraticCurveTo(331, 235, 321, 239);

context.quadraticCurveTo(311, 237, 314, 225);

context.quadraticCurveTo(321, 214, 327, 225);

context.closePath();

context.fillStyle = "#2F1B1D"

context.fill();

context.lineWidth = 1.5;

context.stroke();

context.beginPath();

context.moveTo(251, 225);

context.quadraticCurveTo(255, 235, 248, 239);

context.quadraticCurveTo(237, 238, 240, 225);

context.quadraticCurveTo(247, 216, 251, 225);

context.closePath();

context.fillStyle = "#2F1B1D"

context.fill();

context.lineWidth = 1.5;

context.stroke();

//eyebrows

context.beginPath();

context.moveTo(244, 169)

context.quadraticCurveTo(254, 145, 265, 169);

context.lineWidth = 2;

context.lineCap = "round";

context.stroke();

context.beginPath();

context.moveTo(323, 169)

context.quadraticCurveTo(334, 145, 349, 169);

context.lineWidth = 2;

context.lineCap = "round";

context.stroke();

//mouth

context.beginPath();

context.moveTo(326, 300);

context.lineTo(319, 313);

context.lineTo(296, 320);

context.lineTo(277, 299);

context.quadraticCurveTo(275, 277, 283, 275);

context.quadraticCurveTo(310, 266, 326, 300);

context.closePath();

context.fillStyle = "#2F1B1D"

context.fill();

context.lineWidth = 3;

context.stroke();

//tooth

context.beginPath();

context.moveTo(300, 275);

context.lineTo(306, 277);

context.lineTo(306, 292);

context.quadraticCurveTo(306, 293, 303, 297);

context.quadraticCurveTo(282, 301, 278, 297);

context.quadraticCurveTo(272, 268, 300, 275);

context.closePath();

context.fillStyle = "#EFE7E0"

context.fill();

context.linewidth = 2;

context.stroke();

//tongue

context.beginPath();

context.moveTo(324, 300);

context.quadraticCurveTo(323, 316, 301, 319);

context.quadraticCurveTo(287, 313, 287, 301);

context.quadraticCurveTo(305, 302, 314, 290);

context.lineTo(324, 300);

context.closePath();

context.fillStyle = "#925239"

context.fill();

context.linewidth = 2;

context.stroke();

//tail swirl

context.beginPath();

context.moveTo(550, 300);

context.quadraticCurveTo(513, 269, 550, 225);

context.quadraticCurveTo(566, 207, 571, 229);

context.lineWidth = 4;

context.stroke();

//inside head outline

context.beginPath();

context.moveTo(450, 126.5);

context.quadraticCurveTo(487, 150, 478, 200);

context.lineTo(478, 205);

context.quadraticCurveTo(525, 208, 490, 220);

context.quadraticCurveTo(520, 225, 488, 232);

context.quadraticCurveTo(476, 274, 400, 285);

context.lineTo(350, 300);

context.quadraticCurveTo(315, 318, 300, 319);

context.strokeStyle = "#382622";

context.lineWidth = 4;

context.stroke();

//inside body outline

context.beginPath();

context.moveTo(419, 284);

context.quadraticCurveTo(450, 345, 427, 375);

context.lineWidth = 3.5;

context.stroke();

context.beginPath();

context.moveTo(430.5, 370);

context.quadraticCurveTo(454, 370, 468, 400);

context.quadraticCurveTo(492, 449, 439, 500);

context.lineWidth = 4;

context.stroke();

////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ

};

</script>

</head>

<body>

</body>

</html>

Search This Blog

A Digital Journey

Coding "Hazel"

Comments

Post a Comment

Popular posts from this blog

Collage Animation

5 Fictional Company Ideas