Spongebob Canvas Project

var myGradient0 = context.createLinearGradient(0,300,400,600,300)
myGradient0.addColorStop(0, "rgba(107,225,226,1)");
myGradient0.addColorStop(0.5, "rgba(60,225,226,1)");
myGradient0.addColorStop(1, "rgba(35,77,2225,1)");

//body
context.beginPath();


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

context.closePath();

context.fillStyle = myGradient0
context.fill();
 

context.beginPath();

context.moveTo(230,500);
context.lineTo(600,500);
context.lineTo(600,150);
context.arc(550, 150, 50, Math.PI*0, Math.PI*1.5, true);
//context.lineTo(550,100); ////
context.lineTo(280,100);
//context.lineTo(230,150); ////
context.arc(280, 150, 50, Math.PI*1.5, Math.PI*1, true);
context.lineTo(225,515);


context.strokeStyle = "rgba(204,187,0,1)";
context.lineWidth = 5

context.closePath();

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


context.strokeStyle = "black";

//eyelashes

context.beginPath();
context.rect(330,137,5,30);
context.closePath();
context.fillStyle = "black";
context.fill();
context.stroke();



context.beginPath();
context.rect(360,135,5,30);
context.closePath();
context.fillStyle = "black";
context.fill();
context.stroke();


context.beginPath();
context.rect(390,140,5,30);
context.closePath();
context.fillStyle = "black";
context.fill();
context.stroke();



context.beginPath();
context.rect(460,140,5,30);
context.closePath();
context.fillStyle = "black";
context.fill();
context.stroke();



context.beginPath();
context.rect(485,135,5,30);
context.closePath();
context.fillStyle = "black";
context.fill();
context.stroke();



context.beginPath();
context.rect(510,135,5,30);
context.closePath();
context.fillStyle = "black";
context.fill();
context.stroke();


//eye1

context.beginPath();

context.arc(370,200,55,0,Math.PI*2,true);


context.closePath();
context.lineWidth = 1
context.fillStyle= "white"
context.fill();
context.stroke();

context.beginPath();

context.arc(380,200,30,0,Math.PI*2,true);


context.closePath();
context.lineWidth = 1
context.fillStyle= "rgba(0,215,255,1)"
context.fill();
context.stroke();

context.beginPath();

context.arc(385,200,13,0,Math.PI*2,true);


context.closePath();
context.lineWidth = 1
context.fillStyle= "black"
context.fill();
context.stroke();


//eye2

context.beginPath();

context.arc(480,200,55,0,Math.PI*2,true);


context.closePath();
context.lineWidth = 1
context.fillStyle= "white"
context.fill();
context.stroke();

context.beginPath();

context.arc(470,200,30,0,Math.PI*2,true);


context.closePath();
context.lineWidth = 1
context.fillStyle= "rgba(0,215,255,1)"
context.fill();
context.stroke();

context.beginPath();

context.arc(460,200,13,0,Math.PI*2,true);


context.closePath();
context.lineWidth = 1
context.fillStyle= "black"
context.fill();
context.stroke();

//dots

context.beginPath();

context.arc(275,400,20,0,Math.PI*2,true);


context.closePath();
context.lineWidth = 5
context.fillStyle= "rgba(204,187,0,1)"
context.fill();


context.beginPath();


context.beginPath();

context.arc(250,370,10,0,Math.PI*2,true);


context.closePath();
context.lineWidth = 5
context.fillStyle= "rgba(204,187,0,1)"
context.fill();






context.beginPath();

context.arc(265,150,20,0,Math.PI*2,true);


context.closePath();
context.lineWidth = 5
context.fillStyle= "rgba(204,187,0,1)"
context.fill();



context.beginPath();

context.arc(250,200,10,0,Math.PI*2,true);


context.closePath();
context.lineWidth = 5
context.fillStyle= "rgba(204,187,0,1)"
context.fill();



context.beginPath();

context.arc(550,140,10,0,Math.PI*2,true);


context.closePath();
context.lineWidth = 5
context.fillStyle= "rgba(204,187,0,1)"
context.fill();


context.beginPath();

context.arc(560,350,20,0,Math.PI*2,true);


context.closePath();
context.lineWidth = 5
context.fillStyle= "rgba(204,187,0,1)"
context.fill();


context.beginPath();


context.beginPath();

context.arc(550,400,10,0,Math.PI*2,true);


context.closePath();
context.lineWidth = 5
context.fillStyle= "rgba(204,187,0,1)"
context.fill();


context.beginPath();

//teeth
context.strokeStyle ="black";
context.lineWidth = 1
context.beginPath();
context.rect(385,324,30,35);
context.closePath();
context.fillStyle = "white";
context.fill();
context.stroke();

context.strokeStyle ="black";
context.lineWidth = 1
context.beginPath();
context.rect(425,325,30,35);
context.closePath();
context.fillStyle = "white";
context.fill();
context.stroke();






//smile

context.beginPath();
context.arc(425, 216, 112, Math.PI*.1, Math.PI*-3.1, false);
context.lineWidth = 4;
context.strokeStyle = "black";
context.stroke();

// cheekbones

context.beginPath();
context.arc(545, 230, 23, Math.PI*1.8, Math.PI*.2, true);
context.lineWidth = 2;
context.strokeStyle = "rgba(204,32,0,1)";
context.stroke();

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

context.beginPath();
context.arc(305, 230, 23, Math.PI*.8, Math.PI*1.2, true);
context.lineWidth = 2;
context.strokeStyle = "rgba(204,32,0,1)";
context.stroke();
// cheek dots

context.beginPath();


context.arc(300,220,4,0,Math.PI*2,true);


context.closePath();
context.lineWidth = 2
context.fillStyle= "rgba(204,32,0,1)"
context.fill();

context.beginPath();


context.arc(310,230,4,0,Math.PI*2,true);


context.closePath();
context.lineWidth = 2
context.fillStyle= "rgba(204,32,0,1)"
context.fill();

context.beginPath();


context.arc(300,238,4,0,Math.PI*2,true);


context.closePath();
context.lineWidth = 2
context.fillStyle= "rgba(204,32,0,1)"
context.fill();

context.beginPath();


context.arc(540,230,4,0,Math.PI*2,true);


context.closePath();
context.lineWidth = 2
context.fillStyle= "rgba(204,32,0,1)"
context.fill();


context.beginPath();


context.arc(550,220,4,0,Math.PI*2,true);


context.closePath();
context.lineWidth = 2
context.fillStyle= "rgba(204,32,0,1)"
context.fill();


context.beginPath();


context.arc(552,240,4,0,Math.PI*2,true);


context.closePath();
context.lineWidth = 2
context.fillStyle= "rgba(204,32,0,1)"
context.fill();

//chin

context.beginPath();
context.arc(420, 400, 20, Math.PI*1.25, Math.PI*1.75, false);
context.lineWidth = 2;
context.strokeStyle = "rgba(204,32,0,1)";
context.stroke();


//arm 1
context.strokeStyle = "black";
context.beginPath();


context.rect(210,500,250,500);
context.lineWidth = 1
context.closePath();

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


context.beginPath();

context.moveTo(225,450);
context.quadraticCurveTo(75,625,400,500);




context.closePath();

context.fillStyle = "white";
context.fill();
context.stroke();

// arm 2
context.beginPath();


context.rect(300,500,315,500);

context.closePath();

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


context.beginPath();

context.beginPath();

context.moveTo(600,450);
context.quadraticCurveTo(750,625,400,500);




context.closePath();

context.fillStyle = "white";
context.fill();
context.stroke();
//body

context.beginPath();


context.rect(225,450,375,450);

context.closePath();

context.fillStyle = "white";
context.fill();
context.stroke();

 
context.beginPath();


context.rect(225,500,375,500);

context.closePath();

context.fillStyle = "rgba(127,80,38,1)";
context.fill();
context.stroke();


context.beginPath();

context.rect(275,500,75,25);

context.closePath();

context.fillStyle = "black"
context.fill();
context.stroke();



context.beginPath();

context.rect(375,500,75,25);

context.closePath();

context.fillStyle = "black"
context.fill();
context.stroke();



context.beginPath();

context.rect(475,500,75,25);

context.closePath();

context.fillStyle = "black"
context.fill();
context.stroke();


//tie


context.beginPath();


context.moveTo(465,450); // starting point
context.lineTo(365,450); // ending point
context.lineTo(465,537);
context.lineTo(365,537);

context.closePath();

context.fillStyle = "white",
context.fill();
context.stroke();



context.beginPath();

context.moveTo(430,450);
context.lineTo(530,450);
context.lineTo(450,485)

context.closePath();
context.fillStyle = "white";
context.fill();
context.stroke();


 context.beginPath();

context.moveTo(300,450);
context.lineTo(400,450);
context.lineTo(375,485)

context.closePath();
context.fillStyle = "white";
context.fill();
context.stroke();



//nose

context.beginPath();


context.arc(425,250,30,0, Math.PI*2,true);


context.closePath();
context.lineWidth = 2
context.fillStyle= "rgba(255,252,21,1)";
context.fill();
context.stroke();
context.strokeStyle = "black";

context.beginPath();


context.arc(425,275,30,0, Math.PI*2,Math.PI*1.5,true);


context.closePath();
context.lineWidth = 1
context.strokeStyle = "rgba(255,252,21,1)";
context.fillStyle= "rgba(255,252,21,1)";
context.fill();
context.stroke();


context.beginPath();
context.arc(425, 250, 30, Math.PI*0.5, Math.PI*1.5, true);
context.lineWidth = 2;
context.strokeStyle = "black";
context.stroke();



//// ARC 4
context.beginPath();
context.arc(500, 175, 55, Math.PI*1.35, Math.PI*1.90, false);
context.lineWidth = 3;
context.strokeStyle = "black";
context.stroke();

context.beginPath();
context.arc(350, 170, 55, Math.PI*1.1, Math.PI*1.70, false);
context.lineWidth = 3;
context.strokeStyle = "black";
context.stroke();