Nemo. should/could have put more time into this little guy

   

var myGradient =context.createLinearGradient(0,0,800,600);
myGradient.addColorStop(0, "rgba(36,193,255,1)");
myGradient.addColorStop(.1, "rgba(22,155,255,1)");
myGradient.addColorStop(.2, "rgba(11,108,255,1)");
myGradient.addColorStop(.3, "rgba(34,146,255,1)");
myGradient.addColorStop(.4, "rgba(20,42,255,1)");
myGradient.addColorStop(.5, "rgba(32,120,255,1)");
myGradient.addColorStop(.6, "rgba(10,90,255,1)");
myGradient.addColorStop(.7, "rgba(4,131,255,1)");
myGradient.addColorStop(.8, "rgba(20,42,255,1)");
myGradient.addColorStop(.9, "rgba(0,96,255,1)");
myGradient.addColorStop(1, "rgba(14,38,255,1)");





//// RECTANGLE
context.beginPath();
//x and y coordinates of the left corner
//width and height of the rectangle
//cover the entire background
context.rect(0,0,canvas.width,canvas.height);
context.closePath();
context.stroke(); //makes it visible
context.fillStyle=myGradient
context.fill();








var myGradient1=context.createRadialGradient(400,320,10,500,600,600);
//20 is radius, the first 400,300 are the inner coordinates
myGradient1.addColorStop(0,"rgba(232,105,2,1)");

myGradient1.addColorStop(.3,"rgba(232,105,2,1)");
myGradient1.addColorStop(.31,"rgba(0,0,0,1)");

myGradient1.addColorStop(.32,"rgba(255,255,255,1)");

myGradient1.addColorStop(.41,"rgba(255,255,255,1)");
myGradient1.addColorStop(.42,"rgba(0,0,0,1)");
myGradient1.addColorStop(.43,"rgba(232,105,2,1)");

myGradient1.addColorStop(.6,"rgba(232,105,2,1)");
myGradient1.addColorStop(.61,"rgba(0,0,0,1)");

myGradient1.addColorStop(.62,"rgba(255,255,255,1)");

myGradient1.addColorStop(.71,"rgba(255,255,255,1)");
myGradient1.addColorStop(.72,"rgba(0,0,0,1)");
myGradient1.addColorStop(.73,"rgba(232,105,2,1)");

myGradient1.addColorStop(.8,"rgba(232,105,2,1)");
myGradient1.addColorStop(.81,"rgba(0,0,0,1)");

myGradient1.addColorStop(.82,"rgba(255,255,255,1)");

myGradient1.addColorStop(.91,"rgba(255,255,255,1)");
myGradient1.addColorStop(.92,"rgba(0,0,0,1)");
myGradient1.addColorStop(.93,"rgba(232,105,2,1)");




//left/little fin



context.beginPath();
//starting coordinates Ax,Ay
context.moveTo(300,380);

//Bezier Curve
//CP1x,CP1y,CP2x,CP2y,Bx,By
context.bezierCurveTo(200,200,100,480,300,390); //cp1,cp2 stop at point b


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







//back fin


 context.beginPath();
//starting coordinates Ax,Ay
context.moveTo(300,120);

//Bezier Curve
//CP1x,CP1y,CP2x,CP2y,Bx,By
context.bezierCurveTo(0,-10,10,400,300,220); //cp1,cp2 stop at point b


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






//body back layer
context.beginPath();
//starting coordinates Ax,Ay
context.moveTo(250,120);

//Bezier Curve
//CP1x,CP1y,CP2x,CP2y,Bx,By
context.bezierCurveTo(700,10,280,450,280,300); //cp1,cp2 stop at point b


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






//front layer

context.beginPath();
//starting coordinates Ax,Ay
context.moveTo(450,128);

//Bezier Curve
//CP1x,CP1y,CP2x,CP2y,Bx,By
context.bezierCurveTo(800,500,240,600,280,300); //cp1,cp2 stop at point b


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










//right fin

context.beginPath();
//starting coordinates Ax,Ay
context.moveTo(500,400);

//Bezier Curve
//CP1x,CP1y,CP2x,CP2y,Bx,By
context.bezierCurveTo(680,-250,900,550,500,280); //cp1,cp2 stop at point b


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



//right eyes
context.beginPath();
context.arc(475,325,50,0,Math.PI*2,false);
context.closePath();
context.fillStyle= (.75,"rgba(255,255,255,1)")
context.fill();





//left eyes
context.beginPath();
context.arc(350,360,50,0,Math.PI*2,false);
context.closePath();
context.fillStyle= (.75,"rgba(255,255,255,1)")
context.fill();




//smile
context.beginPath();
context.arc(450,400,50,0,3.1416,false);
context.closePath();
context.fillStyle=(1,"rgba(0,0,0,1)")
context.fill();

//smile
context.beginPath();
context.arc(425,400,20,0,3.1416,false);
context.fillStyle=(1,"rgba(255,255,255,1)")
context.fill();

//smile
context.beginPath();
context.arc(470,400,20,0,3.1416,false);
context.fillStyle=(1,"rgba(255,255,255,1)")
context.fill();


//eye detail
context.beginPath();
context.arc(460,320,30,0,Math.PI*2,false);
context.closePath();
context.fillStyle= (.75,"rgba(232,59,0,1)")
context.fill();



context.beginPath();
context.arc(360,350,30,0,Math.PI*2,false);
context.closePath();
context.fillStyle= (.75,"rgba(232,59,0,1)")
context.fill();

context.beginPath();
context.arc(460,320,20,0,Math.PI*2,false);
context.closePath();
context.fillStyle= (.75,"rgba(0,0,0,1)")
context.fill();


context.beginPath();
context.arc(360,350,20,0,Math.PI*2,false);
context.closePath();
context.fillStyle= (.75,"rgba(0,0,0,1)")
context.fill();


context.beginPath();
context.arc(465,300,5,0,Math.PI*2,false);
context.closePath();
context.fillStyle= (.75,"rgba(255,255,255,1)")
context.fill();


context.beginPath();
context.arc(365,330,5,0,Math.PI*2,false);
context.closePath();
context.fillStyle= (.75,"rgba(255,255,255,1)")
context.fill();





//bubbles
var myGradient2=context.createRadialGradient(650,500,10,650,500,200);
myGradient2.addColorStop(0,"rgba(255,255,255,.3)");

myGradient2.addColorStop(.3,"rgba(255,255,255,.9)");

context.beginPath();

context.arc(650,500,40,0,Math.PI*2,false);
context.closePath();
context.fillStyle= myGradient2
context.fill();



var myGradient3=context.createRadialGradient(670,420,10,670,420,100);
myGradient3.addColorStop(0,"rgba(255,255,255,.3)");

myGradient3.addColorStop(.3,"rgba(255,255,255,.9)");

context.beginPath();

context.arc(670,420,25,0,Math.PI*2,false);
context.closePath();
context.fillStyle= myGradient3
context.fill();


var myGradient4=context.createRadialGradient(640,370,10,640,370,20);
myGradient4.addColorStop(0,"rgba(255,255,255,.3)");

myGradient4.addColorStop(.3,"rgba(255,255,255,.6)");

context.beginPath();

context.arc(640,370,15,0,Math.PI*2,false);
context.closePath();
context.fillStyle= myGradient4
context.fill();


var myGradient5=context.createRadialGradient(200,50,10,200,50,50);
myGradient5.addColorStop(0,"rgba(255,255,255,.3)");

myGradient5.addColorStop(.3,"rgba(255,255,255,.6)");

context.beginPath();

context.arc(200,50,25,0,Math.PI*2,false);
context.closePath();
context.fillStyle= myGradient5
context.fill();

var myGradient6=context.createRadialGradient(250,40,10,250,40,30);
myGradient6.addColorStop(0,"rgba(255,255,255,.3)");

myGradient6.addColorStop(.3,"rgba(255,255,255,.6)");

context.beginPath();

context.arc(250,40,17,0,Math.PI*2,false);
context.closePath();
context.fillStyle= myGradient6
context.fill();


var myGradient7=context.createRadialGradient(280,60,5,280,60,20);
myGradient7.addColorStop(0,"rgba(255,255,255,.3)");

myGradient7.addColorStop(.3,"rgba(255,255,255,.6)");

context.beginPath();

context.arc(280,60,10,0,Math.PI*2,false);
context.closePath();
context.fillStyle= myGradient7
context.fill();