Calligram Project- Midnight Train

For my calligram project, I chose to use the song "Don't Stop Believing" by Journey. This song has been a favorite of mine for years now. The lyrics talk about a boy and a girl who "take the midnight train" which is what inspired me to create a train shape. I created a simple train shape that depicts the front car of a train. The train is moving represented by the smoke coming from the car.

To make the train shape, I took ideas from a simple train drawing I saw online. I didn't want all of the words to be the same size. I wanted there to be originality in my design and have variety to it. I chose to change the font sizes in order to accomplish this goal and make the image more interesting. The smoke I made gray to represent the natural color of most smoke. I decided to make the train blue because in the song it says "midnight train" which makes me think of a dark blue night. I made the window light gray, so it would stand out from the blue and look more closely like a transparent window would. I made the tires and other parts black to stand out from the train car as well and create more variety in more design.

It was difficult at first for me to figure out how to curve the letters how I wanted to around the wheels and such. After I got the hang of manipulating the letters, it was fun to see how I could curve them and make them interesting. I have never done a project like this one before, so I really enjoyed the experience of using the words to make my image. The project took me about 3 hours to complete.

Ilustrator Tutorials

1.) https://www.creativebloq.com/digital-art/illustrator-tutorials-1232697

2.) https://www.youtube.com/watch?v=3GzumUieDPY

3.) https://www.youtube.com/watch?v=IBouhf4seWQ

Hello Kitty HTML Reflection

For my canvas project, I decided to code Hello Kitty. My project shows Hello Kitty sitting in the grass on a sunny day. I was initially inspired by other students' projects I saw of different cartoon characters. The artwork itself, is a combination of two different cartoon depictions of Hello Kitty I saw online. I took inspiration from one of her sitting and another of her standing, and I combined the two depictions together. 

This piece is meant to represent one of my favorite childhood cartoons. I was a fan of Hello Kitty when I was younger, so I thought the opportunity to learn to code her would be interesting and exciting for me. I believed that since she was a cartoon character with distinct shapes, she would be manageable to code. Once I started the project, I realized how much time the project would actually take. 

Overall, I was very proud of my finished project. It took a lot of time and work, but I'm happy that I was able to get it to how I wanted. Since I have never used Adobe Dreamweaver before, I was skeptical if I would be able to complete this project. I realized that once I got the hang of the different codes and how to manipulate them, the assignment came easier. The project took me around 15 hours in total time. 

Code:

//Background Gradient

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var startx = 595;

var starty = 400;

var endx = 590;

var endy = 600;

context.beginPath();

context.rect(x, y, width, height);

 var grd = context.createLinearGradient(startx, starty, endx, endy);

grd.addColorStop(0, 'rgb(135, 206, 235)');

grd.addColorStop(1, 'rgb(86, 125, 70)');

context.fillStyle = grd;

context.fill();

context.stroke();

 //top arc

var centerX = 0;

        var centerY = 20

        var radius = 80;

        var startangle = 1.2* Math.PI;;

        var endangle =  0.5* Math.PI;

        context.beginPath();

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

        context.fillStyle = "yellow";

context.fill();

      context.lineWidth = 10;

        context.strokeStyle = "orange";

        context.stroke();

//hello kitty

 //white for left arm

var centerX = 355

var centerY = 392

var radius = 23

context.beginPath();

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

context.lineWidth = 2;

context.strokeStyle = 'rgb(255,255,255)';

context.fillStyle ="rgb(255,255,255)"

context.fill();

context.stroke();

//pink for right arm 

var centerX = 473

var centerY = 360

var radius = 23

context.beginPath();

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

context.lineWidth = 2;

context.strokeStyle = 'rgb(255,255,255)';

context.fillStyle ="rgb(255,192,203)"

context.fill();

context.stroke();

//white for right arm 2

var centerX = 483

var centerY = 400

var radius = 25

context.beginPath();

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

context.lineWidth = 2;

context.strokeStyle = 'rgb(255,255,255)';

context.fillStyle ="rgb(255,255,255)"

context.fill();

context.stroke();

//pink for right arm 5

var centerX = 495

var centerY = 377

var radius = 11

context.beginPath();

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

context.lineWidth = 2;

//context.strokeStyle = 'rgb(255,255,255)';

context.fillStyle ="rgb(255,192,203)"

context.fill();

//context.stroke();

//pink for left arm sleeve

var centerX = 372

var centerY = 355

var radius = 15

context.beginPath();

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

context.lineWidth = 2;

context.strokeStyle = 'rgb(255,192,203)';

context.fillStyle ="rgb(255,192,203)"

context.fill();

context.stroke();

//pink for left arm sleeve 2

var centerX = 365

var centerY = 376

var radius = 10

context.beginPath();

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

context.lineWidth = 2;

context.strokeStyle = 'rgb(255,192,203)';

context.fillStyle ="rgb(255,192,203)"

context.fill();

context.stroke();

// starting point coordinates body

var x = 465;

var y = 348;

// control point coordinates ( magnet )

var cpointX = canvas.width / 1 - 200;

var cpointY = canvas.height / 1 - 70;

// ending point coordinates

var x1 = 370;

var y1 = 500;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 3;

context.strokeStyle = "rgb(0,0,0)";

context.stroke();

context.fillStyle = "rgb(255,8,127)"

context.fill();

 // starting point coordinates #2 body

var x = 370;

var y = 500;

// control point coordinates ( magnet )

var cpointX = canvas.width / 1 - 500;

var cpointY = canvas.height / 1 - 130;

// ending point coordinates

var x1 = 385;

var y1 = 348;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 3;

context.strokeStyle = "rgb(0,0,0)";

context.stroke();

context.fillStyle = "rgb(255,8,127)"

context.fill();

// starting point coordinates left arm 1

var x = 345;

var y = 420;

// control point coordinates ( magnet )

var cpointX = canvas.width / 1 - 510;

var cpointY = canvas.height / 1 - 170;

// ending point coordinates

var x1 = 365;

var y1 = 340;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 3;

context.strokeStyle = "rgb(0,0,0)";

context.stroke();

context.fillStyle = 'rgb(255,255,255)';

context.fill();

//pink for left arm sleeve 2

var centerX = 356

var centerY = 370

var radius = 10

context.beginPath();

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

context.lineWidth = 2;

context.strokeStyle = 'rgb(255,192,203)';

context.fillStyle ="rgb(255,192,203)"

context.fill();

context.stroke();

//pink for left arm sleeve 3

var centerX = 362

var centerY = 360

var radius = 10

context.beginPath();

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

context.lineWidth = 2;

context.strokeStyle = 'rgb(255,192,203)';

context.fillStyle ="rgb(255,192,203)"

context.fill();

context.stroke();

//pink for left arm sleeve 4

var centerX = 367

var centerY = 354

var radius = 10

context.beginPath();

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

context.lineWidth = 2;

context.strokeStyle = 'rgb(255,192,203)';

context.fillStyle ="rgb(255,192,203)"

context.fill();

context.stroke();

// starting point coordinates right arm 2

var x = 485;

var y = 340;

// control point coordinates ( magnet )

var cpointX = canvas.width / 1 - 247;

var cpointY = canvas.height / 1 - 172;

// ending point coordinates

var x1 = 508;

var y1 = 420;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 3;

context.strokeStyle = "rgb(0,0,0)";

context.stroke();

context.fillStyle = 'rgb(255,255,255)';

context.fill();

//pink for right arm 

var centerX = 480

var centerY = 350

var radius = 10

context.beginPath();

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

context.lineWidth = 2;

//context.strokeStyle = 'rgb(255,255,255)';

context.fillStyle ="rgb(255,192,203)"

context.fill();

//context.stroke();

//pink for right arm 2

var centerX = 487

var centerY = 358

var radius = 10

context.beginPath();

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

context.lineWidth = 2;

//context.strokeStyle = 'rgb(255,255,255)';

context.fillStyle ="rgb(255,192,203)"

context.fill();

//context.stroke();

//pink for right arm 3

var centerX = 493

var centerY = 367

var radius = 10

context.beginPath();

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

context.lineWidth = 2;

//context.strokeStyle = 'rgb(255,255,255)';

context.fillStyle ="rgb(255,192,203)"

context.fill();

//context.stroke();

//pink for right arm 4

var centerX = 495

var centerY = 370

var radius = 10

context.beginPath();

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

context.lineWidth = 2;

//context.strokeStyle = 'rgb(255,255,255)';

context.fillStyle ="rgb(255,192,203)"

context.fill();

//context.stroke();

//Rectangle

var x=395;

var y=355;

var width = 60

var height= 100;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 10;

context.fillStyle = 'rgb(255,8,127)';

//context.strokeStyle = 'rgb(255,0,0)';

context.fill();

//context.stroke();

//Rectangle 1

var x=405;

var y=345;

var width = 60

var height= 100;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 10;

context.fillStyle = 'rgb(255,8,127)';

//context.strokeStyle = 'rgb(255,0,0)';

context.fill();

//context.stroke();

//Rectangle 1.5

var x=384;

var y=345;

var width = 60

var height= 100;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 10;

context.fillStyle = 'rgb(255,8,127)';

//context.strokeStyle = 'rgb(255,0,0)';

context.fill();

//context.stroke();

//Rectangle 1.8

var x=375;

var y=365;

var width = 60

var height= 100;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 10;

context.fillStyle = 'rgb(255,8,127)';

//context.strokeStyle = 'rgb(255,0,0)';

context.fill();

//context.stroke();

//Rectangle 2

var x=387;

var y=365;

var width = 40

var height= 100;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 10;

context.fillStyle = 'rgb(255,8,127)';

//context.strokeStyle = 'rgb(255,0,0)';

context.fill();

//context.stroke();

//Rectangle 3

var x=378;

var y=378;

var width = 40

var height= 100;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 10;

context.fillStyle = 'rgb(255,8,127)';

//context.strokeStyle = 'rgb(255,0,0)';

context.fill();

//context.stroke();

//botom arc pink shirt

       

var centerX = canvas.width / 1.88;

        var centerY = canvas.height / 1.80;

        var radius = 30;

        var startangle = 0.5;

        var endangle =  0.85* Math.PI;

        context.beginPath();

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

      context.lineWidth = 3;

context.fillStyle = "pink";

context.fill();

        context.strokeStyle = "black";

        context.stroke();

// starting point coordinates cheek 1

var x = 530;

var y = 290;

// control point coordinates ( magnet )

var cpointX = canvas.width / 1 - 300;

var cpointY = canvas.height / 1 - 225;

// ending point coordinates

var x1 = 340;

var y1 = 335;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 3;

context.strokeStyle = "rgb(0,0,0)";

context.stroke();

context.fillStyle = "rgb(255,255,255)"

context.fill();

// starting point coordinates cheek 2

var x = 400;

var y = 205;

// control point coordinates ( magnet )

var cpointX = canvas.width / 1 - 250;

var cpointY = canvas.height / 1 - 405;

// ending point coordinates

var x1 = 530;

var y1 = 290;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 3;

context.strokeStyle = "rgb(0,0,0)";

context.stroke();

context.fillStyle = "rgb(255,255,255)"

context.fill();

// cheek left 

var x = 400;

var y = 205;

// control point coordinates ( magnet )

var cpointX = canvas.width / 2 - 110;

var cpointY = canvas.height / 2 - 84;

// ending point coordinates

var x1 = 310;

var y1 = 290;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 3;

context.strokeStyle = "rgb(0,0,0)";

context.stroke();

context.fillStyle = "rgb(255,255,255)"

context.fill();

// cheek left bottom

var x = 310;

var y = 290;

// control point coordinates ( magnet )

var cpointX = canvas.width / 2 - 85;

var cpointY = canvas.height / 1 - 285;

// ending point coordinates

var x1 = 340;

var y1 = 335;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 3;

context.strokeStyle = "rgb(0,0,0)";

context.stroke();

context.fillStyle = "rgb(255,255,255)"

context.fill();

//right ear

var x = 520;

var y = 218;

var controlX = 530;

var controlY = 190;

var x1 = 512;

var y1 = 174;

var controlX1 = 490;

var controlY1 = 170;

var x2 = 465;

var y2 = 206;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(controlX, controlY, x1, y1);

context.quadraticCurveTo(controlX1, controlY1, x2, y2);

context.fillStyle = 'rgb(255, 255, 255)';

context.fill();

context.lineWidth = 3;

context.strokeStyle = "rgb(0,0,0)";

context.stroke();

//left ear

var x = 380;

var y = 208;

var controlX = 380;

var controlY = 190;

var x1 = 332;

var y1 = 174;

var controlX1 = 310;

var controlY1 = 210;

var x2 = 325;

var y2 = 226;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(controlX, controlY, x1, y1);

context.quadraticCurveTo(controlX1, controlY1, x2, y2);

context.fillStyle = 'rgb(255, 255, 255)';

context.fill();

context.lineWidth = 3;

context.strokeStyle = "rgb(0,0,0)";

context.stroke();

//left white fill circle 

var centerX = 392

var centerY = 273

var radius = 67

context.beginPath();

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

context.lineWidth = 2;

//context.strokeStyle = 'rgb(0,0,0)';

context.fillStyle ="rgb(255,255,255)"

context.fill();

//context.stroke();

//left white fill circle 2

var centerX = 462

var centerY = 273

var radius = 67

context.beginPath();

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

context.lineWidth = 2;

//context.strokeStyle = 'rgb(0,0,0)';

context.fillStyle ="rgb(255,255,255)"

context.fill();

//context.stroke();

//bow

//side of bow

 // starting point coordinates

var x = 473;

var y = 235;

// control point 1 coordinates ( magnet )

var cpointX1 = canvas.width / 1.9;

var cpointY1 = canvas.height / 2 - 8;

// control point 2 coordinates ( magnet )

var cpointX2 = canvas.width / 1.9;

var cpointY2 = canvas.height / 2 - 165; 

// ending point coordinates 

var x1 = 476;

var y1 = 210;

context.beginPath();

context.moveTo(x, y);

context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, x1, y1);

context.lineWidth = 6;

context.strokeStyle = "rgb(0,0,0)";

context.lineCap = 'round' 

context.stroke();

context.fillStyle ="rgb(255,8,127)"

context.fill(); 

//side of bow right

 // starting point coordinates

var x = 508;

var y = 217;

// control point 1 coordinates ( magnet )

var cpointX1 = canvas.width / 1.35;

var cpointY1 = canvas.height / 2 - 108;

// control point 2 coordinates ( magnet )

var cpointX2 = canvas.width / 1.6;

var cpointY2 = canvas.height / 2 - 1; 

// ending point coordinates 

var x1 = 505;

var y1 = 240;

context.beginPath();

context.moveTo(x, y);

context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, x1, y1);

context.lineWidth = 6;

context.strokeStyle = "rgb(0,0,0)";

context.lineCap = 'round' 

context.stroke();

context.fillStyle ="rgb(255,8,127)"

context.fill();

//circle of bow

var centerX = 490

var centerY = 227

var radius = 17

context.beginPath();

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

context.lineWidth = 4;

context.strokeStyle = 'rgb(0,0,0)';

context.fillStyle ="rgb(255,8,127)"

context.fill();

context.stroke();

//nose

var centerX = 426

var centerY = 307

var radius = 6

context.beginPath();

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

context.lineWidth = 2;

context.strokeStyle = 'rgb(0,0,0)';

context.fillStyle ="rgb(248,222,126)"

context.fill();

context.stroke();

//right eye

var centerX = 470

var centerY = 277

var radius = 9

context.beginPath();

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

context.lineWidth = 2;

context.strokeStyle = 'rgb(0,0,0)';

context.fillStyle ="rgb(0,0,0)"

context.fill();

context.stroke();

//whiskers 1

context.moveTo(505,305); // COORDINATES OF STARTING POINT

context.lineTo(545,318); // COORDS OF ENDING POINT 1

context.lineWidth = 3; // STROKE WIDTH

context.stroke(); // STROKE

//middle right

context.moveTo(505,290); // COORDINATES OF STARTING POINT

context.lineTo(545,295); // COORDS OF ENDING POINT 1

context.lineWidth = 3; // STROKE WIDTH

context.stroke(); // STROKE

//top right

context.moveTo(505,280); // COORDINATES OF STARTING POINT

context.lineTo(548,270); // COORDS OF ENDING POINT 1

context.lineWidth = 3; // STROKE WIDTH

context.stroke(); // STROKE

//left top foot

// starting point coordinates

var x = 335;

var y = 455;

// control point coordinates ( magnet )

var cpointX = canvas.width / 2 - 35;

var cpointY = canvas.height / 2 + 125;

// ending point coordinates

var x1 = 395;

var y1 = 455;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 5;

context.strokeStyle = "rgb(0,0,0)";

context.stroke();

context.fillStyle = "rgb(255,255,255)"

context.fill();

//left bottom foot

// starting point coordinates

var x = 335;

var y = 455;

// control point coordinates ( magnet )

var cpointX = canvas.width / 2 - 75;

var cpointY = canvas.height / 1 - 105;

// ending point coordinates

var x1 = 345;

var y1 = 510;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 5;

context.strokeStyle = "rgb(0,0,0)";

context.stroke();

context.fillStyle = "rgb(255,255,255)"

context.fill();

//leftt bottom foot2

// starting point coordinates

var x = 335;

var y = 455;

// control point coordinates ( magnet )

var cpointX = canvas.width / 2 - 75;

var cpointY = canvas.height / 1 - 105;

// ending point coordinates

var x1 = 345;

var y1 = 510;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 5;

context.strokeStyle = "rgb(0,0,0)";

context.stroke();

context.fillStyle = "rgb(255,255,255)"

context.fill();

//left bottom foot 3

// starting point coordinates

var x = 345;

var y = 510;

// control point coordinates ( magnet )

var cpointX = canvas.width / 1 - 395;

var cpointY = canvas.height / 1 - 78;

// ending point coordinates

var x1 = 395;

var y1 = 455;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 5;

context.strokeStyle = "rgb(0,0,0)";

context.stroke();

context.fillStyle = "rgb(255,255,255)"

context.fill();

//right bottom foot2

// starting point coordinates

var x = 455;

var y = 450;

// control point coordinates ( magnet )

var cpointX = canvas.width / 1 - 355;

var cpointY = canvas.height / 1 - 105;

// ending point coordinates

var x1 = 470;

var y1 = 510;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 5;

context.strokeStyle = "rgb(0,0,0)";

context.stroke();

context.fillStyle = "rgb(255,255,255)"

context.fill();

//right bottom foot 3

// starting point coordinates

var x = 470;

var y = 510;

// control point coordinates ( magnet )

var cpointX = canvas.width / 1 - 273;

var cpointY = canvas.height / 2 + 215;

// ending point coordinates

var x1 = 515;

var y1 = 450;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 5;

context.strokeStyle = "rgb(0,0,0)";

context.stroke();

context.fillStyle = "rgb(255,255,255)"

context.fill();

//right top foot

// starting point coordinates

var x = 455;

var y = 450;

// control point coordinates ( magnet )

var cpointX = canvas.width / 1 - 315;

var cpointY = canvas.height / 2 + 125;

// ending point coordinates

var x1 = 515;

var y1 = 450;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 5;

context.strokeStyle = "rgb(0,0,0)";

context.stroke();

context.fillStyle = "rgb(255,255,255)"

context.fill();

//white for right foot 

var centerX = 492

var centerY = 463

var radius = 24

context.beginPath();

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

context.lineWidth = 2;

context.strokeStyle = 'rgb(255,255,255)';

context.fillStyle ="rgb(255,255,255)"

context.fill();

context.stroke();

//white for right foot 2

var centerX = 478

var centerY = 463

var radius = 24

context.beginPath();

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

context.lineWidth = 2;

context.strokeStyle = 'rgb(255,255,255)';

context.fillStyle ="rgb(255,255,255)"

context.fill();

context.stroke();

//white for right foot 3

var centerX = 478

var centerY = 484.5

var radius = 24

context.beginPath();

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

context.lineWidth = 2;

context.strokeStyle = 'rgb(255,255,255)';

context.fillStyle ="rgb(255,255,255)"

context.fill();

context.stroke();

//white for left foot 3

var centerX = 358

var centerY = 487

var radius = 24

context.beginPath();

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

context.lineWidth = 2;

context.strokeStyle = 'rgb(255,255,255)';

context.fillStyle ="rgb(255,255,255)"

context.fill();

context.stroke();

//white for left foot 2

var centerX = 365

var centerY = 472

var radius = 31

context.beginPath();

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

context.lineWidth = 2;

context.strokeStyle = 'rgb(255,255,255)';

context.fillStyle ="rgb(255,255,255)"

context.fill();

context.stroke();

//white for face

var centerX = 353

var centerY = 307

var radius = 29

context.beginPath();

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

context.lineWidth = 2;

context.strokeStyle = 'rgb(255,255,255)';

context.fillStyle ="rgb(255,255,255)"

context.fill();

context.stroke();

//white for face 2

var centerX = 341.5

var centerY = 290

var radius = 29

context.beginPath();

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

context.lineWidth = 2;

context.strokeStyle = 'rgb(255,255,255)';

context.fillStyle ="rgb(255,255,255)"

context.fill();

context.stroke();

//whiskers line 1

context.beginPath();

  context.moveTo(290,318);

  context.lineTo(330,305);

  context.lineWidth = 3;

  context.strokeStyle = 'rgb(0,0,0)';

  context.lineCap = 'square';

  context.stroke();

//whiskers line 2

context.beginPath();

  context.moveTo(288,295);

  context.lineTo(328,290);

  context.lineWidth = 3;

  context.strokeStyle = 'rgb(0,0,0)';

  context.lineCap = 'square';

  context.stroke();

//whiskers line 3

context.beginPath();

  context.moveTo(288,270);

  context.lineTo(328,280);

  context.lineWidth = 3;

  context.strokeStyle = 'rgb(0,0,0)';

  context.lineCap = 'square';

  context.stroke();

//left eye

var centerX = 377

var centerY = 277

var radius = 9

context.beginPath();

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

context.lineWidth = 2;

context.strokeStyle = 'rgb(0,0,0)';

context.fillStyle ="rgb(0,0,0)"

context.fill();

context.stroke();

//pink shirt sleeve left arm 

context.beginPath();

  context.moveTo(342,370);

  context.lineTo(359,388);

  context.lineWidth = 3;

  context.strokeStyle = 'rgb(0,0,0)';

  context.lineCap = 'square';

  context.stroke();

//pink shirt sleeve right arm 

context.beginPath();

  context.moveTo(507,370);

  context.lineTo(495,388);

  context.lineWidth = 3;

  context.strokeStyle = 'rgb(0,0,0)';

  context.lineCap = 'square';

  context.stroke();