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();

Comments

Post a Comment

Popular posts from this blog

Photoshop HW 1

 Photoshop Tutorial Videos: Video 1: https://www.youtube.com/watch?v=2cQT1ZgvgGI This video was the most helpful in learning about and how to use each tool in the tool bar. The YouTuber goes over in detail which is a must for beginners like myself. I will definitely be looking back to this video to assist me in my projects! Video 2:  https://www.youtube.com/watch?v=61mkx_OV61s This video shows you how to set up your workspace to what you need. He shows you how to add in images and manipulate them. As well as showing us how to use multiple "layers" for your project. He also shows us how to add text behind an image which looked really cool, like making a magazine cover.  Video 3:  https://www.youtube.com/watch?v=IyR_uYsRdPs Dan Scott is an Adobe certified instructor. He went over absolutely everything about and how to use Adobe Photoshop in a really easy was for beginners. He used multiple different example photos which i thought was a big help for when he was manipulating the
Read more

Id Homework 1

Image
  Tutorial 1: https://www.youtube.com/watch?v=0eqhUFRlvgI In this video he creates a food ad/layout. What i found interesting is how he uploaded images and used tools to add them onto the canvas. Instead of certain tools i found it interesting how he manipulated the images to fit the size and shape of the canvas. Tutorial 2: https://www.youtube.com/watch?v=P7MIKi663ok In this tutorial she taught us how to use many tools. The one i found most interesting is how she used the rectangle frame tool to insert an image to the size you want it on your canvas. I think this will help me in my future projects so i can create different collages and such. Tutorial 3: https://www.youtube.com/watch?v=N9D_0UQrOhA This tutorial was extremely helpful! Since our next project is creating business cards using our logo's... he showed us hot to add our logo to the canvas. He showed many other tips and tricks with the text box tool. It really showed me in an easy way how to do this next project!
Read more