Mickey Mouse HTML 5 Project

For my Project I decided to create Mickey Mouse! I made this cartoon Mickey from memory and used mainly bezier curves! I think he turned out really well and I am very proud of this cartoon as my first ever attempt of a cartoon through HTML 5 code.

Here is the code I crated for Mickey:

//mickey big circle head

var centerx = 450;

var centery = 400;

var radius = 150;

//mickey right ear

var centerx1 = 600;

var centery1 = 260;

var radius1 = 90;

//mickey left ear

var centerx2 = 300;

var centery2 = 260;

var radius2 = 90;

//mickey top left face curve

var x = 450;

var y = 300;

var controlx = 400;

var controly = 220;

var controlx1 = 250;

var controly1 = 300;

var endx = 350;

var endy = 400

//mickey top right face curve

var x = 450;

var y = 300;

var controlx2 = 500;

var controly2 = 220;

var controlx3 = 650;

var controly3 = 300;

var endx1 = 550;

var endy1 = 400;

//mickey botom left face curve 

var x1 = 450;

var y1 = 580;

var controlx4 = 210 ;

var controly4 = 490;

var controlx5 = 210;

var controly5 = 350;

var endx2 = 350 ;

var endy2 = 400;

//Mickey bottom right face curve

var x1 = 450;

var y1 = 580;

var controlx6 = 670 ;

var controly6 = 490;

var controlx7 = 670;

var controly7 = 350;

var endx3 = 550 ;

var endy3 = 400;

//chin

var centerx3 = 450;

var centery3 = 520;

var radius3 = 80;

//mickey nose 

var centerx4 = 450;

var centery4 = 450;

var radius4 = 32;

//nose quadratic curve

var x5 = 420

var y5 = 430

var controlx10 = 450

var controly10 = 380

var endx10 =480

var endy10 =430

//left eye

var centerx5 = 390;

var centery5 = 350;

var radius5 = 35;

//right eye

var centerx6 = 510;

var centery6 = 350;

var radius6 = 35;

//mouth

var centerx7 = 450;

var centery7 = 500;

var radius7 = 55;

//right pupil

var centerx8 = 505;

var centery8 = 360;

var radius8 = 12;

//left pupil

var centerx9 = 395;

var centery9 = 360;

var radius9 = 12;

//mickey big circle head

context.beginPath();

context.arc(centerx,centery,radius,0, 2*Math.PI, false);

context.fillStyle = 'black';

context.fill();

context.stroke();

//mickey right ear

context.beginPath();

context.arc(centerx1,centery1,radius1,0, 2*Math.PI, false);

context.fillStyle = 'black';

context.fill();

context.stroke();

//mickey left ear

context.beginPath();

context.arc(centerx2,centery2,radius2,0, 2*Math.PI, false);

context.fillStyle = 'black';

context.fill();

context.stroke();

//mickey top left face curve

context.beginPath();

context.moveTo(x,y);

context.bezierCurveTo(controlx,controly,controlx1,controly1,endx,endy);

context.fillStyle = 'tan';

context.fill();

context.stroke();

//mickey top right face curve

context.beginPath();

context.moveTo(x,y);

context.bezierCurveTo(controlx2,controly2,controlx3,controly3,endx1,endy1);

context.fillStyle = 'tan';

context.fill();

context.stroke();

//face top curve triangle fill

context.beginPath();

context.moveTo(x,y);

context.lineTo(endx,endy);

context.lineTo(endx1,endy1);

context.lineTo(x,y)

context.fillStyle = 'tan';

context.fill();

context.strokeStyle = 'tan';

context.stroke();

//mickey bottom  left face curve

context.beginPath();

context.moveTo(x1,y1);

context.bezierCurveTo(controlx4,controly4,controlx5,controly5,endx2,endy2);

context.fillStyle = 'tan';

context.fill();

context.stroke();

//mickey bottom right face curve

context.beginPath();

context.moveTo(x1,y1);

context.bezierCurveTo(controlx6,controly6,controlx7,controly7,endx3,endy3);

context.fillStyle = 'tan';

context.fill();

context.stroke();

//face bottom curve triangle

context.beginPath();

context.moveTo(x1,y1);

context.lineTo(endx2,endy2);

context.lineTo(endx3,endy3);

context.lineTo(x1,y1)

context.fillStyle = 'tan';

context.fill();

context.strokeStyle = 'tan';

context.stroke();

//mickey chin circle

context.beginPath();

context.arc(centerx3,centery3,radius3,0, 2*Math.PI, false);

context.fillStyle = 'tan';

context.fill();

context.stroke();

//mickey nose

context.beginPath();

context.arc(centerx4,centery4,radius4,0, 2*Math.PI, false);

context.fillStyle = 'black';

context.fill();

context.stroke();

//nose quadratic curve

context.beginPath();

context.moveTo(x5,y5);

context.quadraticCurveTo(controlx10,controly10,endx10,endy10);

context.fillStyle = 'black';

context.fill();

context.lineWidth = 9;

context.stroke();

//left eye

context.beginPath();

context.arc(centerx5,centery5,radius5,0, 2*Math.PI, false);

context.fillStyle = 'black';

context.fill();

context.stroke();

//right eye

context.beginPath();

context.arc(centerx6,centery6,radius6,0, 2*Math.PI, false);

context.fillStyle = 'black';

context.fill();

context.stroke();

//mouth

context.beginPath();

context.arc(centerx7,centery7,radius7,0, Math.PI, false);

context.fillStyle = 'red';

context.fill();

context.stroke();

//right pupil 

context.beginPath();

context.arc(centerx8,centery8,radius8,0, 2*Math.PI, false);

context.fillStyle = 'black';

context.lineWidth = 6;

context.strokeStyle = 'white';

context.fill();

context.stroke();

//left pupil

context.beginPath();

context.arc(centerx9,centery9,radius9,0, 2*Math.PI, false);

context.fillStyle = 'black';

context.lineWidth = 6;

context.strokeStyle = 'white';

context.fill();

context.stroke();