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();