Code for canvas project

 /// Horizontal Gradient

 var gradient2 = context.createLinearGradient(0, 200, 0, 300);

gradient2.addColorStop(0, '#131943');

gradient2.addColorStop(1, 'rgba(0,74,255,0.50)');

context.fillStyle = gradient2;

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


///Quadratic Curve

// starting point coordinates

var x = 0;

var y = 200;


// control point 1 coordinates ( magnet )

var cpointX1 = canvas.width / 6;

var cpointY1 = canvas.height / 2 + 150;


// control point 2 coordinates ( magnet )

var cpointX2 = canvas.width / 1.5;

var cpointY2 = canvas.height / 2 - 200; 


// ending point coordinates 

var x1 = 800;

var y1 = 250;



context.beginPath();

context.moveTo(x, y);

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


context.lineWidth = 6;

context.strokeStyle = "rgba(124,207,248,0.61)";

context.lineCap = 'round' 

context.stroke();


//context.lineCap = Lines can have one of three cap styles: butt, round, or square

// lineCap property must be set before calling stroke()

//top arc

var centerX = 595;

        var centerY = 300

        var radius = 65;

        var startangle = 0* Math.PI;;

        var endangle =  1* Math.PI;


        context.beginPath();

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

        context.fillStyle = "#000002";

context.fill();

      context.lineWidth = 5;

        context.strokeStyle = "#1D2D47";

        context.stroke();

 

//top arc BODY

var centerX = 350;

        var centerY = 500

        var radius = 220;

        var startangle = 0* Math.PI;;

        var endangle =  1* Math.PI;


        context.beginPath();

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

        context.fillStyle = "#01010A";

context.fill();

      context.lineWidth = 5;

        context.strokeStyle = "#222048";

        context.stroke();

//CHEST

var centerX = 600;

        var centerY = 500

        var radius = 100;

        var startangle = 0* Math.PI;;

        var endangle =  1* Math.PI;


        context.beginPath();

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

        context.fillStyle = "#000009";

context.fill();

      context.lineWidth = 5;

        context.strokeStyle = "#0F010F";

        context.stroke();




// starting point coordinates B CURVE EYE??


//top arc

var centerX = 600;

        var centerY = 270

        var radius = 10;

        var startangle = 0* Math.PI;;

        var endangle =  1* Math.PI;


        context.beginPath();

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

        context.fillStyle = "#FB1616";

context.fill();

      context.lineWidth = 5;

        context.strokeStyle = "#690909";

        context.stroke();

//botom arc

       

var centerX = canvas.width / 0;

        var centerY = canvas.height / 2;

        var radius = 70;

        var startangle = 1.9;

        var endangle =  1* Math.PI;


        context.beginPath();

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

        //context.fillStyle = "red";

      context.lineWidth = 50;

        context.strokeStyle = "#F9171B";

        context.stroke();

//top arc

var centerX = 600;

        var centerY = 270

        var radius = 10;

        var startangle = 0* Math.PI;;

        var endangle =  1* Math.PI;


        context.beginPath();

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

        context.fillStyle = "#FD2318";

context.fill();

      context.lineWidth = 5;

        context.strokeStyle = "#6F1A13";

        context.stroke();

//botom arc

       

var centerX = canvas.width / 0;

        var centerY = canvas.height / 2;

        var radius = 70;

        var startangle = 1.9;

        var endangle =  1* Math.PI;


        context.beginPath();

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

        //context.fillStyle = "red";

      context.lineWidth = 50;

        context.strokeStyle = "black";

        context.stroke();


//Rectangle


var x=100;

var y=100;

var width = 100

var height= 150;


context.beginPath();

context.rect(535, 300, width, height);

context.lineWidth = 10;

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

context.strokeStyle = 'rgba(8,0,0,1.00)';

context.fill();

context.stroke();


//context.rect(x, y, width, height); // top left corner x and y coordinates, width and height


// for a square width = height , the width and the height have the same value

//top arc SPOTS

var centerX = 400;

        var centerY = 370

        var radius = 10;

        var startangle = 0* Math.PI;;

        var endangle =  1* Math.PI;


        context.beginPath();

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

        context.fillStyle = "#FDFDFD";

context.fill();

      context.lineWidth = 5;

        context.strokeStyle = "#FFFFFF";

        context.stroke();

//botom arc

       

var centerX = canvas.width / 0;

        var centerY = canvas.height / 2;

        var radius = 70;

        var startangle = 1.9;

        var endangle =  1* Math.PI;


        context.beginPath();

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

        //context.fillStyle = "red";

      context.lineWidth = 50;

        context.strokeStyle = "black";

        context.stroke();


//top arc

var centerX = 400;

        var centerY = 400

        var radius = 10;

        var startangle = 0* Math.PI;;

        var endangle =  1* Math.PI;


        context.beginPath();

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

        context.fillStyle = "#FBEEEE";

context.fill();

      context.lineWidth = 5;

        context.strokeStyle = "#969393";

        context.stroke();

//botom arc

       

var centerX = canvas.width / 0;

        var centerY = canvas.height / 2;

        var radius = 70;

        var startangle = 1.9;

        var endangle =  1* Math.PI;


        context.beginPath();

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

        //context.fillStyle = "red";

      context.lineWidth = 50;

        context.strokeStyle = "black";

        context.stroke();

//top arc

var centerX = 400;

        var centerY = 450

        var radius = 10;

        var startangle = 0* Math.PI;;

        var endangle =  1* Math.PI;


        context.beginPath();

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

        context.fillStyle = "#FBEEEE";

context.fill();

      context.lineWidth = 5;

        context.strokeStyle = "#969393";

        context.stroke();

//botom arc

       

var centerX = canvas.width / 0;

        var centerY = canvas.height / 2;

        var radius = 70;

        var startangle = 1.9;

        var endangle =  1* Math.PI;


        context.beginPath();

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

        //context.fillStyle = "red";

      context.lineWidth = 50;

        context.strokeStyle = "black";

        context.stroke();

//top arc

var centerX = 450;

        var centerY = 450

        var radius = 10;

        var startangle = 0* Math.PI;;

        var endangle =  1* Math.PI;


        context.beginPath();

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

        context.fillStyle = "#FBEEEE";

context.fill();

      context.lineWidth = 5;

        context.strokeStyle = "#969393";

        context.stroke();

//botom arc

       

var centerX = canvas.width / 0;

        var centerY = canvas.height / 2;

        var radius = 70;

        var startangle = 1.9;

        var endangle =  1* Math.PI;


        context.beginPath();

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

        //context.fillStyle = "red";

      context.lineWidth = 50;

        context.strokeStyle = "black";

        context.stroke();

//top arc

var centerX = 500;

        var centerY = 450

        var radius = 10;

        var startangle = 0* Math.PI;;

        var endangle =  1* Math.PI;


        context.beginPath();

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

        context.fillStyle = "#FBEEEE";

context.fill();

      context.lineWidth = 5;

        context.strokeStyle = "#969393";

        context.stroke();

//botom arc

       

var centerX = canvas.width / 0;

        var centerY = canvas.height / 2;

        var radius = 70;

        var startangle = 1.9;

        var endangle =  1* Math.PI;


        context.beginPath();

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

        //context.fillStyle = "red";

      context.lineWidth = 50;

        context.strokeStyle = "black";

        context.stroke();

 


 //top arc

var centerX = 450;

        var centerY = 350

        var radius = 10;

        var startangle = 0* Math.PI;;

        var endangle =  1* Math.PI;


        context.beginPath();

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

        context.fillStyle = "#FBEEEE";

context.fill();

      context.lineWidth = 5;

        context.strokeStyle = "#969393";

        context.stroke();

//botom arc

       

var centerX = canvas.width / 0;

        var centerY = canvas.height / 2;

        var radius = 70;

        var startangle = 1.9;

        var endangle =  1* Math.PI;


        context.beginPath();

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

        //context.fillStyle = "red";

      context.lineWidth = 50;

        context.strokeStyle = "black";

        context.stroke();

//top arc

var centerX = 450;

        var centerY = 400

        var radius = 10;

        var startangle = 0* Math.PI;;

        var endangle =  1* Math.PI;


        context.beginPath();

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

        context.fillStyle = "#FBEEEE";

context.fill();

      context.lineWidth = 5;

        context.strokeStyle = "#969393";

        context.stroke();

//botom arc

       

var centerX = canvas.width / 0;

        var centerY = canvas.height / 2;

        var radius = 70;

        var startangle = 1.9;

        var endangle =  1* Math.PI;


        context.beginPath();

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

        //context.fillStyle = "red";

      context.lineWidth = 50;

        context.strokeStyle = "black";

        context.stroke();

//top arc

var centerX = 500;

        var centerY = 400

        var radius = 10;

        var startangle = 0* Math.PI;;

        var endangle =  1* Math.PI;


        context.beginPath();

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

        context.fillStyle = "#FBEEEE";

context.fill();

      context.lineWidth = 5;

        context.strokeStyle = "#969393";

        context.stroke();

//botom arc

       

var centerX = canvas.width / 0;

        var centerY = canvas.height / 2;

        var radius = 70;

        var startangle = 1.9;

        var endangle =  1* Math.PI;


        context.beginPath();

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

        //context.fillStyle = "red";

      context.lineWidth = 50;

        context.strokeStyle = "black";

        context.stroke();


//top arc

var centerX = 400;

        var centerY = 300

        var radius = 10;

        var startangle = 0* Math.PI;;

        var endangle =  1* Math.PI;


        context.beginPath();

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

        context.fillStyle = "#FBEEEE";

context.fill();

      context.lineWidth = 5;

        context.strokeStyle = "#969393";

        context.stroke();

//top arc

var centerX = 400;

        var centerY = 370

        var radius = 10;

        var startangle = 0* Math.PI;;

        var endangle =  1* Math.PI;


        context.beginPath();

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

        context.fillStyle = "#FBEEEE";

context.fill();

      context.lineWidth = 5;

        context.strokeStyle = "#969393";

        context.stroke();

//top arc

var centerX = 400;

        var centerY = 330

        var radius = 10;

        var startangle = 0* Math.PI;;

        var endangle =  1* Math.PI;


        context.beginPath();

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

        context.fillStyle = "#FBEEEE";

context.fill();

      context.lineWidth = 5;

        context.strokeStyle = "#969393";

        context.stroke();

//botom arc

       

var centerX = canvas.width / 0;

        var centerY = canvas.height / 2;

        var radius = 70;

        var startangle = 1.9;

        var endangle =  1* Math.PI;


        context.beginPath();

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

        //context.fillStyle = "red";

      context.lineWidth = 50;

        context.strokeStyle = "black";

        context.stroke();

//botom arc

       

var centerX = canvas.width / 0;

        var centerY = canvas.height / 2;

        var radius = 70;

        var startangle = 1.9;

        var endangle =  1* Math.PI;


        context.beginPath();

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

        //context.fillStyle = "red";

      context.lineWidth = 50;

        context.strokeStyle = "#3FEEF4";

        context.stroke();

//SPOTS CON'D

//top arc

var centerX = 350;

        var centerY = 400

        var radius = 10;

        var startangle = 0* Math.PI;;

        var endangle =  1* Math.PI;


        context.beginPath();

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

        context.fillStyle = "#FBEEEE";

context.fill();

      context.lineWidth = 5;

        context.strokeStyle = "#969393";

        context.stroke();

//top arc

var centerX = 350;

        var centerY = 350

        var radius = 10;

        var startangle = 0* Math.PI;;

        var endangle =  1* Math.PI;


        context.beginPath();

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

        context.fillStyle = "#FBEEEE";

context.fill();

      context.lineWidth = 5;

        context.strokeStyle = "#969393";

        context.stroke();

//top arc

var centerX = 350;

        var centerY = 300

        var radius = 10;

        var startangle = 0* Math.PI;;

        var endangle =  1* Math.PI;


        context.beginPath();

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

        context.fillStyle = "#FBEEEE";

context.fill();

      context.lineWidth = 5;

        context.strokeStyle = "#969393";

        context.stroke();

//botom arc

       

var centerX = canvas.width / 0;

        var centerY = canvas.height / 2;

        var radius = 70;

        var startangle = 1.9;

        var endangle =  1* Math.PI;


        context.beginPath();

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

        //context.fillStyle = "red";

      context.lineWidth = 50;

        context.strokeStyle = "black";

        context.stroke();

//NECK ARCH

//top arc

var centerX = 660;

        var centerY = 360

        var radius = 45;

        var startangle = 0* Math.PI;;

        var endangle =  1* Math.PI;


        context.beginPath();

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

        context.fillStyle = "#9494FF";

context.fill();

      context.lineWidth = 5;

        context.strokeStyle = "#9B9DFF";

        context.stroke();

//botom arc

       

var centerX = canvas.width / 0;

        var centerY = canvas.height / 2;

        var radius = 70;

        var startangle = 1.9;

        var endangle =  1* Math.PI;


        context.beginPath();

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

        //context.fillStyle = "red";

      context.lineWidth = 50;

        context.strokeStyle = "black";

        context.stroke();

//top arc

var centerX = 660;

        var centerY = 360

        var radius = 45;

        var startangle = 0* Math.PI;;

        var endangle =  1* Math.PI;


        context.beginPath();

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

        context.fillStyle = "#879AF2";

context.fill();

      context.lineWidth = 5;

        context.strokeStyle = "#9897FC";

        context.stroke();

//botom arc

       

var centerX = canvas.width / 0;

        var centerY = canvas.height / 2;

        var radius = 70;

        var startangle = 1.9;

        var endangle =  1* Math.PI;


        context.beginPath();

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

        //context.fillStyle = "red";

      context.lineWidth = 50;

        context.strokeStyle = "black";

        context.stroke();


//WATER RIPPLES

//Simple lines


context.moveTo(700,500); // COORDINATES OF STARTING POINT

context.lineTo(50,500); // COORDS OF ENDING POINT 1

context.lineWidth = 15; // STROKE WIDTH

context.stroke(); // STROKE

//botom arc

       

var centerX = canvas.width / 0;

        var centerY = canvas.height / 2;

        var radius = 70;

        var startangle = 1.9;

        var endangle =  1* Math.PI;


        context.beginPath();

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

        //context.fillStyle = "red";

      context.lineWidth = 50;

        context.strokeStyle = "#3FEEF4";

        context.stroke();

//light blue line

    

var x= 600;

var y= 550;

var x1= 400;

var y1= 550;    

    

context.beginPath();

context.moveTo(x,y);

context.lineTo(x1,y1);

context.lineWidth = 25;

context.strokeStyle = 'rgba(0,234,234,0.59)';

context.lineCap = 'round';

context.stroke();

//light blue line

    

var x= 50;

var y= 550;

var x1= 200;

var y1= 550;    

    

context.beginPath();

context.moveTo(x,y);

context.lineTo(x1,y1);

context.lineWidth = 25;

context.strokeStyle = 'rgba(0,234,234,0.59)';

context.lineCap = 'round';

context.stroke();

//light blue line

    

var x= 700;

var y= 550;

var x1= 770;

var y1= 550;    

    

context.beginPath();

context.moveTo(x,y);

context.lineTo(x1,y1);

context.lineWidth = 25;

context.strokeStyle = 'rgba(0,234,234,0.59)';

context.lineCap = 'round';

context.stroke();

//Dark blue line

    

var x= 150;

var y= 520;

var x1= 400;

var y1= 520;    

    

context.beginPath();

context.moveTo(x,y);

context.lineTo(x1,y1);

context.lineWidth = 25;

context.strokeStyle = 'rgba(49,64,164,0.77)';

context.lineCap = 'round';

context.stroke();

//Dark blue line

    

var x= 500;

var y= 520;

var x1= 650;

var y1= 520;    

    

context.beginPath();

context.moveTo(x,y);

context.lineTo(x1,y1);

context.lineWidth = 25;

context.strokeStyle = 'rgba(41,49,146,0.74)';

context.lineCap = 'round';

context.stroke();

//Dark blue line

    

var x= 500;

var y= 570;

var x1= 650;

var y1= 570;    

    

context.beginPath();

context.moveTo(x,y);

context.lineTo(x1,y1);

context.lineWidth = 25;

context.strokeStyle = 'rgba(41,49,146,0.43)';

context.lineCap = 'round';

context.stroke();

//light blue line

    

var x= 70;

var y= 500;

var x1= 700;

var y1= 500;    

    

context.beginPath();

context.moveTo(x,y);

context.lineTo(x1,y1);

context.lineWidth = 25;

context.strokeStyle = 'rgba(41,151,151,0.97)';

context.lineCap = 'round';

context.stroke();

//TAIL/BEAK 

// TRIANGLE

context.beginPath(); // begin a shape

 

context.moveTo(160,420); // point A coordinates

context.lineTo(80, 480); // point B coords

context.lineTo(130,480); // point C coords

context.closePath(); // close the shape

context.lineWidth = 25; // you can use a variable that changes wherever you see a number

context.lineJoin = "butt";

context.strokeStyle = "rgba(0,0,2,1.00)"; // Reb Green Blue Alpha

context.stroke();

context.fillStyle = "rgba(0,0,6,1.00)";

context.fill();

// TRIANGLE

context.beginPath(); // begin a shape

 

context.moveTo(650,270); // point A coordinates

context.lineTo(640, 310); // point B coords

context.lineTo(750,310); // point C coords

context.closePath(); // close the shape

context.lineWidth = 10; // you can use a variable that changes wherever you see a number

context.lineJoin = "butt";

context.strokeStyle = "rgba(255,0,155,0.00)"; // Reb Green Blue Alpha

context.stroke();

context.fillStyle = "rgba(0,0,4,0.99)";

context.fill();

//HIGHLIGHT

// TRIANGLE

context.beginPath(); // begin a shape

 

context.moveTo(660,280); // point A coordinates

context.lineTo(660, 300); // point B coords

context.lineTo(720,300); // point C coords

context.closePath(); // close the shape

context.lineWidth = 10; // you can use a variable that changes wherever you see a number

context.lineJoin = "round";

context.strokeStyle = "rgba(140,143,165,0.00)"; // Reb Green Blue Alpha

context.stroke();

context.fillStyle = "rgba(174,177,211,0.99)";

context.fill();

//EYE HIGHLIGHT 

//top arc

var centerX = 602;

        var centerY = 265

        var radius = 2;

        var startangle = 0* Math.PI;;

        var endangle =  1* Math.PI;


        context.beginPath();

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

        context.fillStyle = "#F8BCC9";

context.fill();

      context.lineWidth = 5;

        context.strokeStyle = "#F9999B";

        context.stroke();

//botom arc

       

var centerX = canvas.width / 0;

        var centerY = canvas.height / 2;

        var radius = 70;

        var startangle = 1.9;

        var endangle =  1* Math.PI;


        context.beginPath();

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

        //context.fillStyle = "red";

      context.lineWidth = 50;

        context.strokeStyle = "#F8B8B8";

        context.stroke();

//TOP HALF

//top arc

var centerX = 602;

        var centerY = 265

        var radius = 2;

        var startangle = 0* Math.PI;;

        var endangle =  1* Math.PI;


        context.beginPath();

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

        context.fillStyle = "#FCB6B7";

context.fill();

      context.lineWidth = 5;

        context.strokeStyle = "#FFFFFF";

        context.stroke();

//botom arc

       

var centerX = canvas.width / 0;

        var centerY = canvas.height / 2;

        var radius = 70;

        var startangle = 1.9;

        var endangle =  1* Math.PI;


        context.beginPath();

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

        //context.fillStyle = "red";

      context.lineWidth = 50;

        context.strokeStyle = "black";

        context.stroke();

//Black line

    

var x= 540;

var y= 300;

var x1= 520;

var y1= 470;    

    

context.beginPath();

context.moveTo(x,y);

context.lineTo(x1,y1);

context.lineWidth = 25;

context.strokeStyle = 'rgba(0,3,3,0.97)';

context.lineCap = 'round';

context.stroke();

//light blue line

    

var x= 50;

var y= 500;

var x1= 710;

var y1= 500;    

    

context.beginPath();

context.moveTo(x,y);

context.lineTo(x1,y1);

context.lineWidth = 25;

context.strokeStyle = 'rgba(38,49,100,0.97)';

context.lineCap = 'round';

context.stroke();

//MORE RIPPLES

// starting point coordinates

var x = 660;

var y = 400;


// control point coordinates ( magnet )

var cpointX = canvas.width / 1.2

var cpointY = canvas.height / 2;


// ending point coordinates

var x1 = 800;

var y1 = 400;



context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);


context.lineWidth = 5;

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

context.stroke();

//EDIT NECK

//top arc

var centerX = 630;

        var centerY = 290

        var radius = 25;

        var startangle = 0* Math.PI;;

        var endangle =  1* Math.PI;


        context.beginPath();

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

        context.fillStyle = "#000005";

context.fill();

      context.lineWidth = 5;

        context.strokeStyle = "#080008";

        context.stroke();

//botom arc

       

var centerX = canvas.width / 0;

        var centerY = canvas.height / 2;

        var radius = 70;

        var startangle = 1.9;

        var endangle =  1* Math.PI;


        context.beginPath();

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

        //context.fillStyle = "red";

      context.lineWidth = 50;

        context.strokeStyle = "black";

        context.stroke();


//SMALL SPOTS FOR REAL THIS TIME

//top arc

var centerX = 110;

        var centerY = 470

        var radius = 2;

        var startangle = 0* Math.PI;;

        var endangle =  1* Math.PI;


        context.beginPath();

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

        context.fillStyle = "#3F3F44";

context.fill();

      context.lineWidth = 5;

        context.strokeStyle = "#FFFFFF";

        context.stroke();

//botom arc

       

var centerX = canvas.width / 0;

        var centerY = canvas.height / 2;

        var radius = 70;

        var startangle = 1.9;

        var endangle =  1* Math.PI;


        context.beginPath();

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

        //context.fillStyle = "red";

      context.lineWidth = 50;

        context.strokeStyle = "#FFFAFA";

        context.stroke();

//TOP HALF

//top arc

var centerX = 110;

        var centerY = 470

        var radius = 2;

        var startangle = 0* Math.PI;;

        var endangle =  1* Math.PI;


        context.beginPath();

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

        context.fillStyle = "#FFFFFF";

context.fill();

      context.lineWidth = 5;

        context.strokeStyle = "#FFFFFF";

        context.stroke();

//SPOT 2

//top arc

var centerX = 120;

        var centerY = 410

        var radius = 2;

        var startangle = 0* Math.PI;;

        var endangle =  1* Math.PI;


        context.beginPath();

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

        context.fillStyle = "#F7F7F8";

context.fill();

      context.lineWidth = 5;

        context.strokeStyle = "#FFFFFF";

        context.stroke();

//botom arc

       

var centerX = canvas.width / 0;

        var centerY = canvas.height / 2;

        var radius = 70;

        var startangle = 1.9;

        var endangle =  1* Math.PI;


        context.beginPath();

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

        //context.fillStyle = "red";

      context.lineWidth = 50;

        context.strokeStyle = "#FFFAFA";

        context.stroke();

//TOP HALF

//top arc

var centerX = 120;

        var centerY = 410

        var radius = 2;

        var startangle = 0* Math.PI;;

        var endangle =  1* Math.PI;


        context.beginPath();

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

        context.fillStyle = "#FFFFFF";

context.fill();

      context.lineWidth = 5;

        context.strokeStyle = "#FFFFFF";

        context.stroke();

//botom arc

       

var centerX = canvas.width / 0;

        var centerY = canvas.height / 2;

        var radius = 70;

        var startangle = 1.9;

        var endangle =  1* Math.PI;


Comments

Post a Comment

Popular posts from this blog

InDesign Videos

  Get Started with 10 Beginner Tips for InDesign - Bing video   One tool that might be hard to use is the drop shadow. This is probably because I am not quite sure how to use it. All the text options sound fun but also a little overwhelming. There are a lot of options to remember. I also think that the different ways to scale an image is going to take some getting used to. You must be careful if you accidentally cut off the image w hen you try to fix the image.   InDesign Business Card Design Tips & Tricks - InDesign Business Card Tutorial - Bing video   One thing I am worried about is coming up with a template that will be easy to create in InDesign. I also wonder what makes a good business card design. I also wonder how to create a bleed . I am not sure I did that right in class. Overall creating a business card does not seem too hard.   Adobe InDesign Tutorial for Beginners - 2022 - Bing video     The two-column view seems like a useful ...
Read more

Photoshop Portrait

Image
  Artist statement: My portrait is a picture of my Halloween costume face paint . I dressed up as a skeleton, so I had skeleton face paint on. I used split complementary colors picked from adobe.color.com to fill in my portrait. I used the quick selection tool to pick what areas to fill in and then I used the fill tool to fill in the color. I went into select and mask and used brush tool and refine edge tool to fix stuff up.   
Read more

Photoshop Videos

  Photoshop Tutorial for Beginners 2022 | Everything You NEED to KNOW! - Bing video   I am excited to play around with the fonts in photoshop. There seems to be a lot of different tools to create different fonts. I like the different blending modes photoshop has to offer. The example in the video where the user uses a photo of light and makes it look natu ral is intriguing .     Photoshop Tutorial For Beginners - Top 10 Things Beginners Need to Know - Bing video   One thing that might be a little difficult is the different workspaces  in photoshop. I do not know which one we will be using in class. I like that there are many different layers, like a lot of different programs. I am a little worried about working with the saturation in layers.     Photoshop Art Tutorial: Beginner Friendly Tutorial - YouTube   The black masks seem like a fun tool I am just a little confused on how to work it. How do you control the color? Can you layer ...
Read more