Poochie Canvas Project

For this project, when we got assigned it, I thought about my dog. I made this project with my dog in mind and even used similar colors. I did change some things along the way but the concept was mostly about my dog.




Code:

///Background
var myGradient = context.createLinearGradient(0,0,800,0);
myGradient.addColorStop(0,    "rgba(0,127,70,1)"    );
   myGradient.addColorStop(0.5,  "rgba(151,255,208,1)"  ); //

myGradient.addColorStop(1,    "rgba(176,255,219,1)"     );

//// Rectangle

context.beginPath();


context.rect(0,0,canvas.width,canvas.height);



context.closePath();

context.fillStyle = myGradient;
context.fill();

context.beginPath();

//Body
var grdbody = context.createRadialGradient(600,300,400,650,10,400);
grdbody.addColorStop(0,"rgba(255,212,151,1)");
grdbody.addColorStop(0.5,"rgba(255,222,176,1)");
grdbody.addColorStop(1, "rgba(199,124,17,1)");

context.moveTo(210,380);
context.bezierCurveTo(330,900,500,900,600,375);
context.bezierCurveTo(550,180,230,190,210,375);





context.closePath();
context.fillStyle = grdbody;
context.fill();


/// Head
context.beginPath();

var head = context.createRadialGradient(600,300,400,650,100,40);

head.addColorStop(0,"rgba(199,124,17,1)");
head.addColorStop(0.5,"rgba(255,222,176,1)");
head.addColorStop(1,"rgba(255,212,151,1)");
context.moveTo(330,375);
context.bezierCurveTo(100,100,40,20,500,37);
context.bezierCurveTo(730,80,600,200,500,375);




context.closePath();

context.fillStyle = head;
context.fill();

//Mouth
context.beginPath();


context.moveTo(350,350);
context.quadraticCurveTo(200,500,400,451);
context.quadraticCurveTo(650,500,500,351);

context.closePath();

context.fillStyle = head;
context.fill();

//Ear 1
context.beginPath();

var ear1 = context.createRadialGradient(600,200,400,600,200,300);

ear1.addColorStop(0,"rgba(199,124,17,1)");
ear1.addColorStop(0.5,"rgba(255,222,176,1)");
ear1.addColorStop(1,"rgba(127,106,76,1)");

context.moveTo(170,90); //A
context.quadraticCurveTo(10,400,100,401); //Cp1 B
context.quadraticCurveTo(310,390,200,115); //Cp2, A


context.closePath();

context.fillStyle = ear1;
context.fill();


// Ear 2
context.beginPath();

var ear2 = context.createRadialGradient(600,20,400,600,20,30);

ear2.addColorStop(0,"rgba(199,124,17,1)");
ear2.addColorStop(0.5,"rgba(255,222,176,1)");
ear2.addColorStop(1,"rgba(255,212,151,1)");


context.moveTo(610,90); //A
context.quadraticCurveTo(850,400,690,401); //Cp1 B
context.quadraticCurveTo(510,380,610,115); //Cp2, A


context.closePath();

context.fillStyle = ear2;
context.fill();

// eye 1
context.beginPath();



context.arc(500,150,40,0,Math.PI*2,false);


 context.closePath();

 context.fillStyle = "rgba(255,255,255,1)";
 context.fill();

// Pupil 1
context.beginPath();


context.arc(500,150,20,0,Math.PI*2,false);


   context.closePath();
context.fillStyle="rgba(0,0,0,0.3)";
context.fill();

// Eye 2
context.beginPath();

context.arc(300,150,40,0,Math.PI*2,false);


 context.closePath();

 context.fillStyle = "rgba(255,255,255,1)";
 context.fill();

// Pupil 2
context.beginPath();


context.arc(300,150,20,0,Math.PI*2,false);


   context.closePath();
context.fillStyle="rgba(0,0,0,0.3)";
context.fill();

/// Nose

context.beginPath();

context.moveTo(390,400);
context.quadraticCurveTo(420,510,450,400);

context.closePath();
context.fillStyle = "rgba(0,0,0,1)";
context.fill();

//whiskers

context.beginPath();

  context.moveTo(556,350);
context.lineTo(500,400);

context.closePath();

context.lineWidth = 1;
context.stroke();

context.beginPath();

  context.moveTo(610,350);
context.lineTo(500,410);

context.closePath();

context.lineWidth = 1;
context.stroke();

context.beginPath();

  context.moveTo(670,350);
context.lineTo(500,420);

context.closePath();

context.lineWidth = 1;
context.stroke();


context.beginPath();

  context.moveTo(720,350);
context.lineTo(500,430);

context.closePath();

context.lineWidth = 1;
context.stroke();

// Whiskers 2


context.beginPath();

  context.moveTo(276,350);
context.lineTo(350,400);

context.closePath();

context.lineWidth = 1;
context.stroke();


context.beginPath();

  context.moveTo(200,350);
context.lineTo(350,410);

context.closePath();

context.lineWidth = 1;
context.stroke();

 context.beginPath();

  context.moveTo(160,350);
context.lineTo(350,420);

context.closePath();

context.lineWidth = 1;
context.stroke();

 context.beginPath();

  context.moveTo(110,350);
context.lineTo(350,430);

context.closePath();

context.lineWidth = 1;
context.stroke();

/// tail

context.beginPath();

var tail = context.createRadialGradient(400,300,400,650,100,600);

tail.addColorStop(0,"rgba(199,124,17,1)");
tail.addColorStop(0.5,"rgba(255,222,176,1)");
tail.addColorStop(1,"rgba(255,212,151,1)");

context.moveTo(100,900);
context.quadraticCurveTo(23,220,105,500);
context.quadraticCurveTo(195,250,200,900);



context.closePath();
context.fillStyle = tail;
context.fill();

//Spot on tail

context.beginPath();


context.arc(130,600,46,0,Math.PI*2,false);


   context.closePath();
context.fillStyle="rgba(0,0,0,0.5)";
context.fill();