Self-Portrait

July 24, 2020

Self-Portrait

Did I work on this all day and finish at 2AM?

I sure did. There isn't much else to do on a Friday night in quarantine...

Anyway, here is my self-portrait! I'm very proud of it :) As an illustrator, I thought "I definitely have to go all out on this!"

(Click image to enlarge)

And here's the thumbnail sketch I made as a guide!

Finally, the code:

<!DOCTYPE HTML>

<html>

<head>

window.onload = function() {

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

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

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

context.beginPath();

//canvas

context.beginPath();

context.rect(0, 0, 800, 600);

// add linear gradient

grd = context.createLinearGradient(0, 0, 600, 800);

// light

grd.addColorStop(0, "#d9d0bf");

// dark

grd.addColorStop(1, "#c1b9ac");

context.fillStyle = grd;

context.fill();

context.stroke()

//bird

//tail

context.beginPath();

context.rect(564, 215, 35, 50);

context.fillStyle = '#A0543B';

context.fill();

context.lineWidth = 2;

context.strokeStyle = '#A0543B';

context.stroke()

//chair

//rectangle

context.beginPath();

context.rect(410, 250, 200, 400);

context.fillStyle = '#3E6149';

context.fill();

context.lineWidth = 25;

context.strokeStyle = '#4F3933';

context.stroke()

//bird

//body

var centerX = 575;

var centerY = 213;

var radius = 25;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = "#A0543B";

context.fill();

context.lineWidth = 1;

context.strokeStyle = "#A0543B";

context.stroke();

//hat

var centerX = 400;

var centerY = 188;

var radius = 95;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = "#ADA18C";

context.fill();

context.lineWidth = 1;

context.strokeStyle = "#ADA18C";

context.stroke();

//face

//rectangle

context.beginPath();

context.rect(384, 250, 35, 35);

context.fillStyle = '#EDD8C3';

context.fill();

context.lineWidth = 2;

context.strokeStyle = '#EDD8C3';

context.stroke()

//circle

var centerX = 400;

var centerY = 218;

var radius = 55;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = "#FAE6D1";

context.fill();

context.lineWidth = 1;

context.strokeStyle = "#FAE6D1";

context.stroke();

//hair

//circles

var centerX = 350;

var centerY = 180;

var radius = 25;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = "#55474A";

context.fill();

context.lineWidth = 1;

context.strokeStyle = "#55474A";

context.stroke();

var centerX = 375;

var centerY = 160;

var radius = 20;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = "#55474A";

context.fill();

context.lineWidth = 1;

context.strokeStyle = "#55474A";

context.stroke();

var centerX = 435;

var centerY = 180;

var radius = 25;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = "#55474A";

context.fill();

context.lineWidth = 1;

context.strokeStyle = "#55474A";

context.stroke();

var centerX = 410;

var centerY = 160;

var radius = 20;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = "#55474A";

context.fill();

context.lineWidth = 1;

context.strokeStyle = "#55474A";

context.stroke();

var centerX = 420;

var centerY = 135;

var radius = 30;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = "#55474A";

context.fill();

context.lineWidth = 1;

context.strokeStyle = "#55474A";

context.stroke();

//rectangle

context.beginPath();

context.rect(445, 180, 20, 40);

context.fillStyle = '#55474A';

context.fill();

context.lineWidth = 1;

context.strokeStyle = '#55474A';

context.stroke()

//left arm

context.beginPath();

context.rect(310, 350, 40, 80);

context.fillStyle = '#FAE6D1';

context.fill();

context.lineWidth = 1;

context.strokeStyle = '#FAE6D1';

context.stroke()

//dress

//rectangle

context.beginPath();

context.rect(340, 285, 120, 120);

context.fillStyle = '#E4E0DA';

context.fill();

context.lineWidth = 1;

context.strokeStyle = '#E4E0DA';

context.stroke()

//circles

var centerX = 475;

var centerY = 317;

var radius = 45;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = "#E4E0DA";

context.fill();

context.lineWidth = 1;

context.strokeStyle = "#E4E0DAB";

context.stroke();

var centerX = 335;

var centerY = 317;

var radius = 45;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = "#E4E0DA";

context.fill();

context.lineWidth = 1;

context.strokeStyle = "#E4E0DA";

context.stroke();

var centerX = 400;

var centerY = 850;

var radius = 450;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = "#F0EBE4";

context.fill();

context.lineWidth = 1;

context.strokeStyle = "#F0EBE4";

context.stroke();

//right arm

context.beginPath();

context.rect(460, 350, 40, 80);

context.fillStyle = '#FAE6D1';

context.fill();

context.lineWidth = 1;

context.strokeStyle = '#FAE6D1';

context.stroke()

context.beginPath();

context.rect(350, 398, 150, 30);

context.fillStyle = '#FAE6D1';

context.fill();

context.lineWidth = 1;

context.strokeStyle = '#FAE6D1';

context.stroke()

//left arm over

context.beginPath();

context.rect(310, 398, 150, 30);

context.fillStyle = '#FAE6D1';

context.fill();

context.lineWidth = 1;

context.strokeStyle = '#FAE6D1';

context.stroke()

//bird cage

//arc

var centerX = 120;

var centerY = 100;

var radius = 60;

var startangle = 0;

var endangle = 1 * Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, true);

context.lineWidth = 5;

context.strokeStyle = "#A3A094";

context.stroke();

//rectangle

context.beginPath();

context.rect(60, 100, 120, 140);

context.lineWidth = 5;

context.strokeStyle = '#A3A094';

context.stroke()

//lines

context.beginPath();

context.moveTo(150, 49);

context.lineTo(150, 240);

context.stroke();

context.beginPath();

context.moveTo(150, 49);

context.lineTo(150, 240);

context.stroke();

context.beginPath();

context.moveTo(125, 39);

context.lineTo(125, 240);

context.stroke();

context.beginPath();

context.moveTo(100, 41);

context.lineTo(100, 240);

context.stroke();

context.beginPath();

context.moveTo(75, 58);

context.lineTo(75, 240);

context.stroke();

context.beginPath();

context.moveTo(10, 28);

context.lineTo(121, 28);

context.stroke();

context.beginPath();

context.moveTo(11, 27);

context.lineTo(10, 600);

context.stroke();

//circle

var centerX = 121;

var centerY = 33;

var radius = 5;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.lineWidth = 5;

context.strokeStyle = "#A3A094";

context.stroke();

// LINES

//neck

context.beginPath();

context.moveTo(380, 268);

context.lineTo(380, 285);

context.lineWidth = 3.5;

context.strokeStyle = "#AB9395";

context.stroke();

context.beginPath();

context.moveTo(421, 264);

context.lineTo(421, 285);

context.lineWidth = 5;

context.strokeStyle = "#AB9395";

context.stroke();

//face

context.beginPath();

context.moveTo(355, 205);

context.lineTo(355, 250);

context.moveTo(352, 245);

context.lineTo(380, 268);

context.moveTo(380, 268);

context.lineTo(430, 265);

context.lineTo(438, 205);

context.lineWidth = 4;

context.strokeStyle = "#BE9FA2";

context.stroke();

//dress

context.beginPath();

context.moveTo(295, 310);

context.lineTo(308, 285);

context.lineTo(343, 278);

context.lineTo(360, 283);

context.lineTo(450, 283);

context.lineTo(475, 275);

context.lineTo(485, 275);

context.lineTo(515, 300);

context.lineTo(515, 335);

context.lineTo(505, 350);

context.lineTo(455, 350);

context.lineTo(448, 395);

context.lineWidth = 3.5;

context.strokeStyle = "#B7C1CB";

context.stroke();

context.beginPath();

context.moveTo(340, 300);

context.lineTo(325, 330);

context.lineWidth = 3.5;

context.strokeStyle = "#B7C1CB";

context.stroke();

context.beginPath();

context.moveTo(325, 325);

context.lineTo(340, 400);

context.lineWidth = 3.5;

context.strokeStyle = "#B7C1CB";

context.stroke();

context.beginPath();

context.moveTo(295, 310);

context.lineTo(295, 330);

context.lineTo(310, 350);

context.lineTo(330, 350);

context.lineWidth = 3.5;

context.strokeStyle = "#B7C1CB";

context.stroke();

context.beginPath();

context.moveTo(315, 410);

context.lineTo(275, 425);

context.lineTo(225, 450);

context.lineTo(175, 475);

context.lineTo(150, 500);

context.lineTo(60, 600);

context.lineWidth = 3.5;

context.strokeStyle = "#B7C1CB";

context.stroke();

context.beginPath();

context.moveTo(500, 420);

context.lineTo(550, 435);

context.lineTo(650, 500);

context.lineTo(750, 600);

context.lineWidth = 3.5;

context.strokeStyle = "#B7C1CB";

context.stroke();

//arms

context.beginPath();

context.moveTo(315, 350);

context.lineTo(315, 428);

context.lineTo(450, 400);

context.lineTo(335, 400);

context.lineWidth = 3.5;

context.strokeStyle = "#AB9395";

context.stroke();

context.beginPath();

context.moveTo(455, 350);

context.lineTo(458, 400);

context.lineWidth = 3.5;

context.strokeStyle = "#AB9395";

context.stroke();

context.beginPath();

context.moveTo(500, 350);

context.lineTo(500, 430);

context.lineTo(350, 421);

context.lineWidth = 3.5;

context.strokeStyle = "#AB9395";

context.stroke();

//hair

context.beginPath();

context.moveTo(425, 108);

context.lineTo(400, 120);

context.lineTo(400, 145);

context.lineTo(375, 145);

context.lineTo(350, 155);

context.lineTo(330, 185);

context.lineTo(350, 200);

context.lineTo(400, 160);

context.lineTo(425, 195);

context.lineTo(455, 200);

context.lineTo(450, 215);

context.lineTo(463, 200);

context.lineTo(463, 185);

context.lineTo(450, 175);

context.lineTo(440, 155);

context.lineTo(435, 150);

context.lineTo(445, 130);

context.lineTo(425, 108);

context.lineWidth = 3.5;

context.strokeStyle = "#423739";

context.stroke();

//face details

//eyes

context.beginPath();

context.moveTo(365, 208);

context.lineTo(378, 208);

context.lineTo(380, 213);

context.lineTo(365, 213);

context.lineTo(365, 208);

context.lineWidth = 2;

context.fillStyle = '#BE9FA2';

context.fill();

context.strokeStyle = "#BE9FA2";

context.stroke();

context.beginPath();

context.moveTo(403, 208);

context.lineTo(415, 208);

context.lineTo(420, 213);

context.lineTo(403, 213);

context.moveTo(403, 208);

context.fillStyle = '#BE9FA2';

context.fill();

context.lineWidth = 2;

context.strokeStyle = "#BE9FA2";

context.stroke();

//nose

context.beginPath();

context.moveTo(383, 238);

context.lineTo(390, 238);

context.lineTo(388, 225);

context.lineTo(383, 238);

context.lineWidth = 4;

context.fillStyle = '#BE9FA2';

context.fill();

context.strokeStyle = "#BE9FA2";

context.stroke();

//mouth

context.beginPath();

context.moveTo(398, 250);

context.lineTo(378, 250);

context.strokeStyle = "#98646A";

context.stroke();

//eyebrows

context.beginPath();

context.moveTo(365, 198);

context.lineTo(382, 198);

context.lineWidth = 3;

context.strokeStyle = "#423739";

context.stroke();

context.beginPath();

context.moveTo(417, 198);

context.lineTo(398, 198);

context.lineWidth = 3;

context.strokeStyle = "#423739";

context.stroke();

//ears

//right ear

context.beginPath();

context.moveTo(435, 221);

context.lineTo(445, 223);

context.lineTo(446, 230);

context.lineTo(446, 238);

context.lineTo(435, 243);

context.lineWidth = 3.5;

context.strokeStyle = "#BE9FA2";

context.stroke();

//left ear

context.beginPath();

context.moveTo(355, 219);

context.lineTo(353, 219);

context.lineTo(347, 222);

context.lineTo(347, 235);

context.lineTo(355, 238);

context.lineWidth = 3.5;

context.strokeStyle = "#BE9FA2";

context.stroke();

//bird detail

//head

var centerX = 565;

var centerY = 185;

var radius = 20;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = "#A0543B";

context.fill();

context.lineWidth = 1;

context.strokeStyle = "#A0543B";

context.stroke();

//eye

var centerX = 558

var centerY = 183

var radius = 2;

var startangle = 0;

var endangle = 1 * Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, true);

context.fillStyle = "#22252F";

context.fill();

context.lineWidth = 5;

context.strokeStyle = "#22252F";

context.stroke();

//beak

context.beginPath();

context.moveTo(545, 185);

context.lineTo(535, 190);

context.lineTo(546, 193);

context.lineTo(545, 185);

context.lineWidth = 3.5;

context.fillStyle = "#B39354";

context.fill();

context.strokeStyle = "#B39354";

context.stroke();

//lines

context.beginPath();

context.moveTo(545, 185);

context.lineTo(550, 168);

context.lineTo(559, 165);

context.lineTo(578, 167);

context.lineTo(585, 180);

context.lineTo(585, 193);

context.lineTo(616, 238);

context.lineTo(560, 238);

context.lineTo(550, 220);

context.lineTo(554, 202);

context.lineTo(549, 196);

context.strokeStyle = "#7A412E";

context.stroke()

//hat

//lines

context.beginPath();

context.moveTo(350, 250);

context.lineTo(320, 235);

context.lineTo(300, 165);

context.lineTo(325, 127);

context.lineTo(375, 125);

context.lineTo(390.5, 125);

context.strokeStyle = "#7A7467";

context.stroke();

context.beginPath();

context.moveTo(451, 139);

context.lineTo(480, 150);

context.lineTo(495, 180);

context.lineTo(465, 250);

context.lineTo(450, 250);

context.strokeStyle = "#7A7467";

context.stroke();

context.beginPath();

context.moveTo(350, 125);

context.lineTo(380, 115);

context.lineTo(396, 115);

context.strokeStyle = "#7A7467";

context.stroke();

//ribbon

context.beginPath();

context.rect(448, 252, 7, 20);

context.fillStyle = '#7D8FC8';

context.fill();

context.lineWidth = 2;

context.strokeStyle = '#7D8FC8';

context.stroke()

//dress

//lines

context.beginPath();

context.moveTo(355, 423);

context.lineTo(300, 600);

context.strokeStyle = "#B7C1CB";

context.lineWidth = 3.5;

context.stroke();

context.beginPath();

context.moveTo(450, 429);

context.lineTo(525, 600);

context.strokeStyle = "#B7C1CB";

context.lineWidth = 3.5;

context.stroke();

//buttons

var centerX = 393;

var centerY = 322;

var radius = 4.5;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = "#B7C1CB";

context.fill();

context.lineWidth = 1;

context.strokeStyle = "#B7C1CB";

context.stroke();

var centerX = 393;

var centerY = 350;

var radius = 4.5;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = "#B7C1CB";

context.fill();

context.lineWidth = 1;

context.strokeStyle = "#B7C1CB";

context.stroke();

//chair

//button

var centerX = 550;

var centerY = 315;

var radius = 8;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = "#344B3B";

context.fill();

context.lineWidth = 1;

context.strokeStyle = "#3E6149";

context.stroke();

//feathers

//left 1

context.beginPath();

context.moveTo(75, 405);

context.lineTo(100, 400);

context.lineTo(118, 390);

context.lineTo(116, 408);

context.lineTo(75, 405);

context.lineWidth = 1;

context.fillStyle = "#A0543B";

context.fill();

context.strokeStyle = "#A0543B";

context.stroke();

//left 2

context.beginPath();

context.moveTo(195, 305);

context.lineTo(230, 295);

context.lineTo(245, 310);

context.lineWidth = 1;

context.fillStyle = "#A0543B";

context.fill();

context.strokeStyle = "#A0543B";

context.stroke();

//right 2

context.beginPath();

context.moveTo(650, 425);

context.lineTo(675, 450);

context.lineTo(700, 450);

context.lineWidth = 1;

context.fillStyle = "#A0543B";

context.fill();

context.strokeStyle = "#A0543B";

context.stroke();

//wow this was so much work. but it was also very fun :)

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

};

</script>

</head>

<body>

</body>

</html>

Comments

E McJuly 28, 2020 at 4:07 PM
Oh, wow, I really like the style used here! I also like that you included the thumbnailing, too!
ReplyDelete
Replies
Robin's NestJuly 31, 2020 at 2:37 PM
Thank you!
ReplyDelete
Replies
Scott PJuly 31, 2020 at 5:01 PM
Very Cool. The Bird, the birdcage, and the dress....... all really amazing!!
ReplyDelete
Replies

Add comment

Search This Blog

Multimedia Graphics

Self-Portrait

Did I work on this all day and finish at 2AM?

Comments

Post a Comment

Popular Posts

Assignment 8 - Lions with Animated Background

APEAK Logo & Balloon Tutorial