Canvas Project

 

Why I decided to do a fish? I grew up fishing with my grandpa on the east coast of Long Island so it has some meaning behind it. I decided to find my inspiration and make it look fun and cute. I added the turtle for more of the “under the sea” look I was going for. 

this project took me about 8 and a half hours. I started working on it pretty early on so I had enough time to finish. A challenge I ran into was the seaweed, believe it or not. I find the coordinate plotting a little challenging because dreamweaver doesn’t show you the X axis. When I was coding my seaweed I needed to figure out how to place it where it needed to be. Eventually, I got it perfectly and wound up with 43of them! As for the bubbles, surprisingly it was easy placing them once I did a few already. I think it adds more effect to my design. I decided to scratch the starfish because it took away from the fish. All in all, I found this project to be fun and exciting while facing the challenges. 

My code is:

//background 

var x1 = 100;

 var y1 = 200;

 var x2 = 500;

 var y2 = 500;

 

 var startx = 0;

 var starty = 0;

 var width = 800;

 var height = 600;

// Rectangle

context.beginPath();

context.rect(startx, starty, canvas.width, canvas.height);

  var grd = context.createLinearGradient(0, 600, 800, 0);

  grd.addColorStop(0, 'rgba(65,82,152,1.00)');

  grd. addColorStop(.5, 'rgba(137,227,250,1.00)');

  grd.addColorStop(1, 'rgba(253,241,185,1.00)');

  context.fillStyle = grd;

 //context.fillStyle = 'rgb(255,0,0)';

  context.fill();

  context.strokeStyle = 'rgb(200,200,200)' ;

 context.lineWidth = 20;

context.stroke();

 // flower

    var flower = context.createLinearGradient(0,100,200,400);

    flower.addColorStop(0,"rgba(26,100,18,1.00)");

    flower.addColorStop(.25,"rgba(247,235,100,1.00)");

    flower.addColorStop(1,"rgba(173,227,121,1.00)");

        context.beginPath();

    context.moveTo(150,100);

    context.bezierCurveTo(-100,-200,-100,100,140,110);

    context.bezierCurveTo(-100,70,-50,300,145,115);

    context.bezierCurveTo(40,180,80,500,170,115);

    context.bezierCurveTo(300,380,330,150,170,100);

    context.bezierCurveTo(330,-50,150,-100,150,100);

    context.closePath();

    context.fillStyle=flower;

    context.fill();

    context.strokeStyle="rgba(244,230,142,1.00)";

    context.stroke();

//seaweed 1

 

var x = 600;

var y = 800;

var controlX = 605;

var controlY = 150;

var x1 = 575;

var y1 = 100;

var controlX1 = 600;

var controlY1 = 375;

var x2 = 500;

var y2 = 650;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(controlX, controlY, x1, y1);

context.quadraticCurveTo(controlX1, controlY1, x2, y2);

context.fillStyle = 'rgba(19,88,19,1.00)';

context.fill();

context.lineWidth = 5;

context.strokeStyle = "rgba(20,64,14,1.00)";

context.stroke();

 

//seaweed 2

 

var x = 660;

var y = 850;

var controlX = 605;

var controlY = 150;

var x1 = 675;

var y1 = 100;

var controlX1 = 600;

var controlY1 = 375;

var x2 = 550;

var y2 = 750;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(controlX, controlY, x1, y1);

context.quadraticCurveTo(controlX1, controlY1, x2, y2);

context.fillStyle = 'rgba(29,86,17,1.00)';

context.fill();

context.lineWidth = 5;

context.strokeStyle = "rgba(13,43,10,1.00)";

context.stroke();

 

//seaweed 3

 

var x = 700;

var y = 800;

var controlX = 605;

var controlY = 100;

var x1 = 575;

var y1 = 100;

var controlX1 = 700;

var controlY1 = 375;

var x2 = 550;

var y2 = 650;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(controlX, controlY, x1, y1);

context.quadraticCurveTo(controlX1, controlY1, x2, y2);

context.fillStyle = 'rgba(41,84,13,1.00)';

context.fill();

context.lineWidth = 5;

context.strokeStyle = "rgba(20,45,10,1.00)";

context.stroke();

//seaweed 4

 

var x = 50;

var y = 650;

var controlX = 105;

var controlY = 500;

var x1 = 175;

var y1 = 500;

var controlX1 = 100;

var controlY1 = 425;

var x2 = 130;

var y2 = 650;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(controlX, controlY, x1, y1);

context.quadraticCurveTo(controlX1, controlY1, x2, y2);

context.fillStyle = 'rgba(41,84,13,1.00)';

context.fill();

context.lineWidth = 5;

context.strokeStyle = "rgba(20,45,10,1.00)";

context.stroke();

 //end seaweed

//fish 

 //fish body

var Ax = 545;

var Ay = 390; //apoint

var Bx = 175;

var By = 350; //bpoint

var control1x = 360;

var control1y = 0;

var control2x = 660;

var control2y = 455;

var control3x = 205; //right side

var control3y = 105;

var control4x = 225;

var control4y = 0;

        context.beginPath();

        context.moveTo(Ax, Ay);

        context.bezierCurveTo(control1x, control1y, control2x, control2y, Bx, By);

        context.bezierCurveTo(control3x, control3y, control4x, control4y, Ax, Ay);

        context.lineWidth = 30;

        // line color

        context.strokeStyle = 'rgba(86,104,243,1.00)';

        context.lineCap = 'round';

        context.stroke();

        context.fillStyle   = 'rgba(122,195,238,1.00)';

        context.fill();

//mouth

var x1 =240;

var y1 =320;

var x2 =160;

var y2 =360;

context.beginPath();

context.moveTo(x1,y1);

context.lineTo(x2,y2);

context.lineWidth = 3;

context.strokeStyle = 'rgba(30,16,11,0.99)';

context.lineCap = 'butt';

context.stroke();

 // starting point coordinates

var x = 174;

var y = 350;

// control point 1 coordinates ( magnet )

var cpointX1 = canvas.width / 6;

var cpointY1 = canvas.height / 2 + 140;

// control point 2 coordinates ( magnet )

var cpointX2 = canvas.width / 1.5;

var cpointY2 = canvas.height / 2 - 300; 

// ending point coordinates 

var x1 = 700;

var y1 = 50;

context.beginPath();

context.moveTo(x, y);

context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, x1, y1);

context.lineWidth = 6;

context.strokeStyle = "rgba(128,128,139,1.00)";

context.lineCap = 'round' 

context.stroke();

 

//Turtle

//Turtle Head

context.beginPath();

context.arc(240, 410, 20, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(0,133,11,1.00)' ;

context.fill();

context.lineWidth =2;

context.strokeStyle = 'rgba(2,98,20,1.00)';

context.stroke();

var centerX = 240;

        var centerY = 490

        var radius = 35;

        var startangle = 1.5* Math.PI;;

        var endangle =  0* Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

        context.fillStyle = "#065A02";

context.fill();

      context.lineWidth = 2;

        context.strokeStyle = "#015A01";

        context.stroke();

var centerX = 150;

        var centerY = 410

        var radius = 35;

        var startangle = 1.5* Math.PI;;

        var endangle =  0* Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

        context.fillStyle = "#045B00";

context.fill();

      context.lineWidth = 2;

        context.strokeStyle = "#015A01";

        context.stroke();

var centerX = 120;

        var centerY = 460

        var radius = 35;

        var startangle = 1.45* Math.PI;;

        var endangle =  0* Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

        context.fillStyle = "#055C00";

context.fill();

      context.lineWidth = 2;

        context.strokeStyle = "#015A01";

        context.stroke();

var centerX = 205;

        var centerY = 525

        var radius = 35;

        var startangle = 1.45* Math.PI;;

        var endangle =  0* Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

        context.fillStyle = "#045E00";

context.fill();

      context.lineWidth = 2;

        context.strokeStyle = "#015A01";

        context.stroke();

//Turtle Body

context.beginPath();

context.arc(205, 450, 50, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(0,133,11,1.00)' ;

context.fill();

context.lineWidth =3;

context.strokeStyle = 'rgba(2,98,20,1.00)';

context.stroke();

// Fish 

///eye

  var centerX = canvas.width / 3.8;

        var centerY = canvas.height / 2.1;

        var radius = 31;

        var startangle = 0;

        var endangle = 3 * Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

    context.fillStyle = 'rgba(255,255,255,1.00)' ;

context.fill();

        context.lineWidth = 3;

        context.strokeStyle = "rgba(0,0,0,1.00)";

        context.stroke();

///eye pupil

context.beginPath();

context.arc(197, 284, 5, 0 , 4* Math.PI, true);

context.fillStyle = 'rgba(5,5,5,1.00)' ;

context.fill();

//bubble 1 

  var centerX = canvas.width / 1.8;

        var centerY = canvas.height / 6.1;

        var radius = 11;

        var startangle = 0;

        var endangle = 3 * Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

    context.fillStyle = 'rgba(255,255,255,1.00)' ;

context.fill();

        context.lineWidth = 2;

        context.strokeStyle = "rgba(189,189,189,1.00)";

        context.stroke();

//bubble 2 

  var centerX = canvas.width / 2.2; //left/right

        var centerY = canvas.height / 8.3; //up/down

        var radius = 11;

        var startangle = 0;

        var endangle = 3 * Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

    context.fillStyle = 'rgba(255,255,255,1.00)' ;

context.fill();

        context.lineWidth = 2;

        context.strokeStyle = "rgba(189,189,189,1.00)";

        context.stroke();

// bigger bubble 3 

  var centerX = canvas.width / 1.7; //left/right

        var centerY = canvas.height / 13.8; //up/down

        var radius = 15;

        var startangle = 0;

        var endangle = 3 * Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

    context.fillStyle = 'rgba(255,255,255,1.00)' ;

context.fill();

        context.lineWidth = 3;

        context.strokeStyle = "rgba(189,189,189,1.00)";

        context.stroke();

//scales

// 1

      var x = 310;

      var y = 270; //up/down

      var radius = 15;       

      var startAngle = 2 * Math.PI;

      var endAngle = 1.5 * Math.PI;      

      var counterClockwise = true; 

      context.beginPath();     

      context.arc(x, y, radius, startAngle, endAngle,  counterClockwise);

      context.lineWidth = 7;

      context.strokeStyle = "rgba(35,124,204,1.00)";

      context.stroke();

//2

      var x = 310;

      var y = 255; //up/down

      var radius = 15;       

      var startAngle = 2 * Math.PI;

      var endAngle = 1.5 * Math.PI;      

      var counterClockwise = true; 

      context.beginPath();     

      context.arc(x, y, radius, startAngle, endAngle,  counterClockwise);

      context.lineWidth = 7;

      context.strokeStyle = "rgba(35,124,204,1.00)";

      context.stroke();

//3

      var x = 310;

      var y = 240; //up/down

      var radius = 15;       

      var startAngle = 2 * Math.PI;

      var endAngle = 1.5 * Math.PI;      

      var counterClockwise = true; 

      context.beginPath();     

      context.arc(x, y, radius, startAngle, endAngle,  counterClockwise);

      context.lineWidth = 7;

      context.strokeStyle = "rgba(35,124,204,1.00)";

      context.stroke();

//4

      var x = 310;

      var y = 225; //up/down

      var radius = 15;       

      var startAngle = 2 * Math.PI;

      var endAngle = 1.5 * Math.PI;      

      var counterClockwise = true; 

      context.beginPath();     

      context.arc(x, y, radius, startAngle, endAngle,  counterClockwise);

      context.lineWidth = 7;

      context.strokeStyle = "rgba(35,124,204,1.00)";

      context.stroke();

//5

      var x = 310;

      var y = 210; //up/down

      var radius = 15;       

      var startAngle = 2 * Math.PI;

      var endAngle = 1.5 * Math.PI;      

      var counterClockwise = true; 

      context.beginPath();     

      context.arc(x, y, radius, startAngle, endAngle,  counterClockwise);

      context.lineWidth = 7;

      context.strokeStyle = "rgba(35,124,204,1.00)";

      context.stroke();

//6

      var x = 340;

      var y = 285; //up/down

      var radius = 15;       

      var startAngle = 2 * Math.PI;

      var endAngle = 1.5 * Math.PI;      

      var counterClockwise = true; 

      context.beginPath();     

      context.arc(x, y, radius, startAngle, endAngle,  counterClockwise);

      context.lineWidth = 7;

      context.strokeStyle = "rgba(35,124,204,1.00)";

      context.stroke();

//7

      var x = 370;

      var y = 240; //up/down

      var radius = 15;       

      var startAngle = 2 * Math.PI;

      var endAngle = 1.5 * Math.PI;      

      var counterClockwise = true; 

      context.beginPath();     

      context.arc(x, y, radius, startAngle, endAngle,  counterClockwise);

      context.lineWidth = 7;

      context.strokeStyle = "rgba(35,124,204,1.00)";

      context.stroke();

//8

      var x = 370;

      var y = 270; //up/down

      var radius = 15;       

      var startAngle = 2 * Math.PI;

      var endAngle = 1.5 * Math.PI;      

      var counterClockwise = true; 

      context.beginPath();     

      context.arc(x, y, radius, startAngle, endAngle,  counterClockwise);

      context.lineWidth = 7;

      context.strokeStyle = "rgba(35,124,204,1.00)";

      context.stroke();

 

//9

      var x = 370;

      var y = 255; //up/down

      var radius = 15;       

      var startAngle = 2 * Math.PI;

      var endAngle = 1.5 * Math.PI;      

      var counterClockwise = true; 

      context.beginPath();     

      context.arc(x, y, radius, startAngle, endAngle,  counterClockwise);

      context.lineWidth = 7;

      context.strokeStyle = "rgba(35,124,204,1.00)";

      context.stroke();

//10

      var x = 370;

      var y = 225; //up/down

      var radius = 15;       

      var startAngle = 2 * Math.PI;

      var endAngle = 1.5 * Math.PI;      

      var counterClockwise = true; 

      context.beginPath();     

      context.arc(x, y, radius, startAngle, endAngle,  counterClockwise);

      context.lineWidth = 7;

      context.strokeStyle = "rgba(35,124,204,1.00)";

      context.stroke();

//row 2 

// 11

      var x = 340;

      var y = 270; //up/down

      var radius = 15;       

      var startAngle = 2 * Math.PI;

      var endAngle = 1.5 * Math.PI;      

      var counterClockwise = true; 

      context.beginPath();     

      context.arc(x, y, radius, startAngle, endAngle,  counterClockwise);

      context.lineWidth = 7;

      context.strokeStyle = "rgba(35,124,204,1.00)";

      context.stroke();

//12

      var x = 340;

      var y = 255; //up/down

      var radius = 15;       

      var startAngle = 2 * Math.PI;

      var endAngle = 1.5 * Math.PI;      

      var counterClockwise = true; 

      context.beginPath();     

      context.arc(x, y, radius, startAngle, endAngle,  counterClockwise);

      context.lineWidth = 7;

      context.strokeStyle = "rgba(35,124,204,1.00)";

      context.stroke();

//13

      var x = 340;

      var y = 240; //up/down

      var radius = 15;       

      var startAngle = 2 * Math.PI;

      var endAngle = 1.5 * Math.PI;      

      var counterClockwise = true; 

      context.beginPath();     

      context.arc(x, y, radius, startAngle, endAngle,  counterClockwise);

      context.lineWidth = 7;

      context.strokeStyle = "rgba(35,124,204,1.00)";

      context.stroke();

//14

      var x = 340;

      var y = 225; //up/down

      var radius = 15;       

      var startAngle = 2 * Math.PI;

      var endAngle = 1.5 * Math.PI;      

      var counterClockwise = true; 

      context.beginPath();     

      context.arc(x, y, radius, startAngle, endAngle,  counterClockwise);

      context.lineWidth = 7;

      context.strokeStyle = "rgba(35,124,204,1.00)";

      context.stroke();

//15

      var x = 340;

      var y = 210; //up/down

      var radius = 15;       

      var startAngle = 2 * Math.PI;

      var endAngle = 1.5 * Math.PI;      

      var counterClockwise = true; 

      context.beginPath();     

      context.arc(x, y, radius, startAngle, endAngle,  counterClockwise);

      context.lineWidth = 7;

      context.strokeStyle = "rgba(35,124,204,1.00)";

      context.stroke();

//end scales

//hook

 // starting point coordinates

var x = 174;

var y = 350;

// control point 1 coordinates ( magnet )

var cpointX1 = canvas.width / 6;

var cpointY1 = canvas.height / 2 + 140;

// control point 2 coordinates ( magnet )

var cpointX2 = canvas.width / 1.5;

var cpointY2 = canvas.height / 2 - 300; 

// ending point coordinates 

var x1 = 700;

var y1 = 50;

context.beginPath();

context.moveTo(x, y);

context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, x1, y1);

context.lineWidth = 6;

context.strokeStyle = "rgba(128,128,139,1.00)";

context.lineCap = 'round' 

context.stroke();

//turtle eyes

// bigger bubble 3 

  var centerX = canvas.width / 3.3; //left/right

        var centerY = canvas.height / 1.52; //up/down

        var radius = 10;

        var startangle = 0;

        var endangle = 3 * Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

    context.fillStyle = 'rgba(255,255,255,1.00)' ;

context.fill();

        context.lineWidth = 1;

        context.strokeStyle = "rgba(12,0,0,1.00)";

        context.stroke();

// bigger bubble 3 

  var centerX = canvas.width / 3.15; //left/right

        var centerY = canvas.height / 1.48; //up/down

        var radius = 10;

        var startangle = 0;

        var endangle = 3 * Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

    context.fillStyle = 'rgba(255,255,255,1.00)' ;

context.fill();

        context.lineWidth = 1;

        context.strokeStyle = "rgba(6,6,6,1.00)";

        context.stroke();

///turtle eye pupil right

context.beginPath();

context.arc(257, 404, 2, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(5,5,5,1.00)' ;

context.fill();

///turtle eye pupil left

context.beginPath();

context.arc(239, 392, 2, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(5,5,5,1.00)' ;

context.fill();

//turtle scales

//scales

// 1

      var x = 210;

      var y = 480; //up/down

      var radius = 15;       

      var startAngle = 2 * Math.PI;

      var endAngle = 1.5 * Math.PI;      

      var counterClockwise = true; 

      context.beginPath();     

      context.arc(x, y, radius, startAngle, endAngle,  counterClockwise);

      context.lineWidth = 2;

      context.strokeStyle = "rgba(14,87,7,1.00)";

      context.stroke();

// 2

      var x = 220;

      var y = 460; //up/down

      var radius = 15;       

      var startAngle = 2 * Math.PI;

      var endAngle = 1.5 * Math.PI;      

      var counterClockwise = true; 

      context.beginPath();     

      context.arc(x, y, radius, startAngle, endAngle,  counterClockwise);

      context.lineWidth = 2;

      context.strokeStyle = "rgba(14,87,7,1.00)";

      context.stroke();

// 2

      var x = 200;

      var y = 460; //up/down

      var radius = 15;       

      var startAngle = 2 * Math.PI;

      var endAngle = 1.5 * Math.PI;      

      var counterClockwise = true; 

      context.beginPath();     

      context.arc(x, y, radius, startAngle, endAngle,  counterClockwise);

      context.lineWidth = 2;

      context.strokeStyle = "rgba(14,87,7,1.00)";

      context.stroke();

// 2

      var x = 178;

      var y = 460; //up/down

      var radius = 15;       

      var startAngle = 2 * Math.PI;

      var endAngle = 1.5 * Math.PI;      

      var counterClockwise = true; 

      context.beginPath();     

      context.arc(x, y, radius, startAngle, endAngle,  counterClockwise);

      context.lineWidth = 2;

      context.strokeStyle = "rgba(14,87,7,1.00)";

      context.stroke();

// 2

      var x = 170;

      var y = 440; //up/down

      var radius = 15;       

      var startAngle = 2 * Math.PI;

      var endAngle = 1.5 * Math.PI;      

      var counterClockwise = true; 

      context.beginPath();     

      context.arc(x, y, radius, startAngle, endAngle,  counterClockwise);

      context.lineWidth = 2;

      context.strokeStyle = "rgba(14,87,7,1.00)";

      context.stroke();

// 2

      var x = 186;

      var y = 430; //up/down

      var radius = 15;       

      var startAngle = 2 * Math.PI;

      var endAngle = 1.5 * Math.PI;      

      var counterClockwise = true; 

      context.beginPath();     

      context.arc(x, y, radius, startAngle, endAngle,  counterClockwise);

      context.lineWidth = 2;

      context.strokeStyle = "rgba(14,87,7,1.00)";

      context.stroke();

// 2

      var x = 210;

      var y = 440; //up/down

      var radius = 15;       

      var startAngle = 2 * Math.PI;

      var endAngle = 1.5 * Math.PI;      

      var counterClockwise = true; 

      context.beginPath();     

      context.arc(x, y, radius, startAngle, endAngle,  counterClockwise);

      context.lineWidth = 2;

      context.strokeStyle = "rgba(14,87,7,1.00)";

      context.stroke();

//eyebrow

//4

      var x = 230;

      var y = 258; //up/down

      var radius = 21;       

      var startAngle = 2 * Math.PI;

      var endAngle = 1.5 * Math.PI;      

      var counterClockwise = true; 

      context.beginPath();     

      context.arc(x, y, radius, startAngle, endAngle,  counterClockwise);

      context.lineWidth = 4;

      context.strokeStyle = "rgba(5,5,5,1.00)";

      context.stroke();

///bubble

  var centerX = canvas.width / 1.5;

        var centerY = canvas.height / 3.2;

        var radius = 8;

        var startangle = 0;

        var endangle = 3 * Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

    context.fillStyle = 'rgba(255,255,255,1.00)' ;

context.fill();

        context.lineWidth = 1;

        context.strokeStyle = "rgba(174,174,174,1.00)";

        context.stroke();

///bubble

  var centerX = canvas.width / 1.4;

        var centerY = canvas.height / 9.9;

        var radius = 8;

        var startangle = 0;

        var endangle = 3 * Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

    context.fillStyle = 'rgba(255,255,255,1.00)' ;

context.fill();

        context.lineWidth = 1;

        context.strokeStyle = "rgba(174,174,174,1.00)";

        context.stroke();

///bubble

  var centerX = canvas.width / 1.5;

        var centerY = canvas.height / 4.9;

        var radius = 12;

        var startangle = 0;

        var endangle = 3 * Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

    context.fillStyle = 'rgba(255,255,255,1.00)' ;

context.fill();

        context.lineWidth = 1;

        context.strokeStyle = "rgba(174,174,174,1.00)";

        context.stroke();

///bubble

  var centerX = canvas.width / 2.0;

        var centerY = canvas.height / 3.9;

        var radius = 12;

        var startangle = 0;

        var endangle = 3 * Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

    context.fillStyle = 'rgba(255,255,255,1.00)' ;

context.fill();

        context.lineWidth = 2;

        context.strokeStyle = "rgba(174,174,174,1.00)";

        context.stroke();

///bubble

  var centerX = canvas.width / 1.9;

        var centerY = canvas.height / 1.5;

        var radius = 10;

        var startangle = 0;

        var endangle = 3 * Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

    context.fillStyle = 'rgba(255,255,255,1.00)' ;

context.fill();

        context.lineWidth = 2;

        context.strokeStyle = "rgba(174,174,174,1.00)";

        context.stroke();

///bubble

  var centerX = canvas.width / 2.0;

        var centerY = canvas.height / 1.3;

        var radius = 12;

        var startangle = 0;

        var endangle = 3 * Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

    context.fillStyle = 'rgba(255,255,255,1.00)' ;

context.fill();

        context.lineWidth = 2;

        context.strokeStyle = "rgba(174,174,174,1.00)";

        context.stroke();

///bubble

  var centerX = canvas.width / 2.4;

        var centerY = canvas.height / 1.5;

        var radius = 9;

        var startangle = 0;

        var endangle = 3 * Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

    context.fillStyle = 'rgba(255,255,255,1.00)' ;

context.fill();

        context.lineWidth = 2;

        context.strokeStyle = "rgba(174,174,174,1.00)";

        context.stroke();

///bubble

  var centerX = canvas.width / 2.3;

        var centerY = canvas.height / 1.2;

        var radius = 10;

        var startangle = 0;

        var endangle = 3 * Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

    context.fillStyle = 'rgba(255,255,255,1.00)' ;

context.fill();

        context.lineWidth = 2;

        context.strokeStyle = "rgba(174,174,174,1.00)";

        context.stroke();

///bubble

  var centerX = canvas.width / 1.7;

        var centerY = canvas.height / 1.6;

        var radius = 8;

        var startangle = 0;

        var endangle = 3 * Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

    context.fillStyle = 'rgba(255,255,255,1.00)' ;

context.fill();

        context.lineWidth = 2;

        context.strokeStyle = "rgba(174,174,174,1.00)";

        context.stroke();

///bubble

  var centerX = canvas.width / 1.7;

        var centerY = canvas.height / 1.3;

        var radius = 13;

        var startangle = 0;

        var endangle = 3 * Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

    context.fillStyle = 'rgba(255,255,255,1.00)' ;

context.fill();

        context.lineWidth = 2;

        context.strokeStyle = "rgba(174,174,174,1.00)";

        context.stroke();