Canvas Project


Hours : 15 Est.


Dreamweaver is one of the hardest programs I ever worked on. I am used to working on programs such as Photoshop, Paint Tool Sai, and Clip Studio Paint Pro, so for me this was really different. Coding was difficult because if you even mess up a coordinate or spell something wrong, the whole picture will temporarily disappear. I love the fact that I have learned a little bit of coding. 

 This is my project. I decided to do a character I have been drawing for a while. Near the end of the project, I wanted to do some sort of illusion with the eyes and the background, just to be experimental. I figured that the circles were going to be my main part. The background is even a circle. I have to say the hardest part of the project was the side burns and the hair falling from the hair buns.  




CODE:

 ///BACKGROUND COLOR
                 var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 2;
      var centerY = canvas.height /1.1;
      var radius = 1000;
      var startAngle = 2.1 * Math.PI;
      var endAngle = 4.1 * Math.PI;
      var counterClockwise = false;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.lineWidth = 1;
    context.stroke();
//    context.fillStyle =  "rgb(89, 89, 89)";
//    context.fill();
    context.closePath();
  
    var back = context.createLinearGradient(0,600,800,600);
  
    back.addColorStop(0, "magenta");
  
    back.addColorStop(1, "blue");

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

  
  

    ////MOON
 var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 4.5;
      var centerY = canvas.height / 2;
      var radius = 200;
      var startAngle = 1.5 * Math.PI;
      var endAngle = 2.1 * Math.PI;
      var counterClockwise = false;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.lineWidth = 1;
  
  
    context.closePath();

    context.fillStyle = "black";
    context.fill();
    context.stroke();
    context.closePath();
  
    var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 4.5;
      var centerY = canvas.height / 2;
      var radius = 150;
      var startAngle = 1.5 * Math.PI;
      var endAngle = 2.1 * Math.PI;
      var counterClockwise = false;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.lineWidth = 1;
  

    context.closePath();

    context.fillStyle = "rgb(26, 26, 26)";
    context.fill();
    context.stroke();
    context.closePath();
  
    var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 4.5;
      var centerY = canvas.height / 2;
      var radius = 100;
      var startAngle = 1.5 * Math.PI;
      var endAngle = 2.1 * Math.PI;
      var counterClockwise = false;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.lineWidth = 1;
  

    context.closePath();

    context.fillStyle = "rgb(51, 51, 51)";
    context.fill();
  
    context.closePath();
  
  
        var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 4.5;
      var centerY = canvas.height / 2;
      var radius = 50;
      var startAngle = 1.5 * Math.PI;
      var endAngle = 2.1 * Math.PI;
      var counterClockwise = false;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.lineWidth = 1;
  
    context.stroke();
    context.closePath();

    context.fillStyle = "rgb(77, 77, 77)";
    context.fill();

    context.closePath();
  
  

    ////SUN

  
     var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 1.3;
      var centerY = canvas.height / 2;
      var radius = 200;
      var startAngle = 1.5 * Math.PI;
      var endAngle = 2.1 * Math.PI;
      var counterClockwise = false;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.lineWidth = 1;
  

    context.closePath();

    context.fillStyle = "rgb(255, 255, 0)";
    context.fill();
  
    context.closePath();
  

     var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 1.3;
      var centerY = canvas.height / 2;
      var radius = 150;
      var startAngle = 1.5 * Math.PI;
      var endAngle = 2.1 * Math.PI;
      var counterClockwise = false;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.lineWidth = 1;
  

    context.closePath();

    context.fillStyle = "rgb(255, 255, 102)";
    context.fill();
  
    context.closePath();
  
  
  
  
     var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 1.3;
      var centerY = canvas.height / 2;
      var radius = 100;
      var startAngle = 1.5 * Math.PI;
      var endAngle = 2.1 * Math.PI;
      var counterClockwise = false;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.lineWidth = 1;
  
context.stroke();
    context.closePath();

    context.fillStyle = "rgb(255, 255, 153)";
    context.fill();
  
    context.closePath();
  
  
  
  
     var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 1.3;
      var centerY = canvas.height / 2;
      var radius = 50;
      var startAngle = 1.5 * Math.PI;
      var endAngle = 2.1 * Math.PI;
      var counterClockwise = false;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.lineWidth = 1;
  
context.stroke();
    context.closePath();

    context.fillStyle = "rgb(255, 255, 204)";
    context.fill();
  
    context.closePath();
  
  
  
  
////BACKGROUND FLOWERS
  
  
            ///BACKGROUND HAIR
  
  
    context.beginPath();
    context.moveTo(300, 200);
    context.lineTo(550, 200);
    context.quadraticCurveTo(650, 650, 700, 600);
    context.lineTo(150, 600);
    context.quadraticCurveTo(250, 350, 250, 200);
    context.stroke();
  
        var grd = context.createLinearGradient(100, 250, 680, 150);
    grd.addColorStop(.05, "rgb(255,255,255)");
    grd.addColorStop(0.5, 'pink');
    grd.addColorStop(.75, "rgb(255, 128, 191)");
    grd.addColorStop(1, "rgb(255, 77, 166)");
    context.fillStyle = grd;
    context.fill();
  
  

    ////NECK
  
    context.beginPath();
    //context.moveTo(350, 350);
    context.lineTo(250, 600);
    context.quadraticCurveTo(360, 550, 250, 300);

    context.lineTo(550, 300);
    context.quadraticCurveTo(350, 600, 600, 700);
  
    var neck = context.createLinearGradient(0,0,300,600);
  
  
    neck.addColorStop(0., "rgb(236, 215, 198)");
  
    neck.addColorStop(1, "rgb(198, 138, 83)");
 //background
  
    context.closePath();
    context.strokeStyle = 'black';
    context.stroke();
    context.fillStyle = neck;
    context.fill();
  
  
//    ///HEAD
//  
 context.beginPath();

 context.moveTo(400, 500); //starting point
  
    context.bezierCurveTo(750,300,500,-100,400,0);
    context.bezierCurveTo(385,-100,-10,350,400,500);
  
context.closePath();
    context.fillStyle = head;
  
var head = context.createRadialGradient(200, 200, 350, 300, 500, 350);
    head.addColorStop(0, "tan");
    head.addColorStop(1, "brown");
  
context.strokeStyle = "black";
    context.stroke();
    context.fill();
   
  
        //HAIR LOOPS

    context.beginPath();
    context.moveTo(100, 160);
    context.quadraticCurveTo(80, 550, 290, 699);
    context.quadraticCurveTo(80, 550, 180, 150);
    context.lineTo(100, 160);
  
    context.moveTo(100, 160);
    context.quadraticCurveTo(90, 600, 200, 599);
    context.quadraticCurveTo(90, 550, 180, 150);
    context.lineTo(100, 160);
  
  
    context.moveTo(100, 160);
    context.quadraticCurveTo(100, 650, 0, 599);
    context.quadraticCurveTo(100, 480, 200, 150);
    context.lineTo(100, 160);
    context.stroke();
  
    var grd = context.createLinearGradient(0, 150, 150, 150);
    grd.addColorStop(0.5, 'pink');
    grd.addColorStop(1, "rgb(255, 128, 191)");
    context.fillStyle = grd;
    context.fill();
  
  
  
    //RIGHT HAIR LOOP
    context.beginPath();
    context.moveTo(640, 160);
    context.quadraticCurveTo(650, 350, 550, 599);
    context.quadraticCurveTo(799, 350, 580, 150);
    context.lineTo(640, 160);
  
    context.moveTo(640, 160);
    context.quadraticCurveTo(750, 350, 450, 699);
    context.quadraticCurveTo(659, 350, 580, 150);
    context.lineTo(640, 160);
  
  
    context.moveTo(640, 160);
    context.quadraticCurveTo(650, 350, 550, 799);
    context.quadraticCurveTo(700, 350, 580, 150);
    context.lineTo(640, 160);
  
    context.stroke();
    context.fillStyle = 'pink';
    context.fill();
  
  
    var grd = context.createLinearGradient(0, 550, 150, 150);
    grd.addColorStop(0.5, 'pink');
    grd.addColorStop(1, "rgb(255, 128, 191)");
    context.fillStyle = grd;
    context.fill();
  
  
    ///Left BUNS 1  
  
  
  
     var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 4.5;
      var centerY = canvas.height / 4.5;
      var radius = 120;
      var startAngle = 1.1 * Math.PI;
      var endAngle = 3.1 * Math.PI;
      var counterClockwise = false;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.lineWidth = 1;
    context.stroke();
    context.closePath

  
    var grd = context.createLinearGradient(0, 150, 250, 150);
    grd.addColorStop(0.5, 'pink');
    grd.addColorStop(1, "rgb(255, 128, 191)");
    context.fillStyle = grd;
    context.fill();
  
//  
    //RIGHT BUN

     var canvas2 = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX2 = canvas.width / 1.4;
      var centerY2 = canvas.height / 4.5;
      var radius = 120;
      var startAngle = 1.1 * Math.PI;
      var endAngle = 3.1 * Math.PI;
      var counterClockwise = true;

      context.beginPath();
      context.arc(centerX2, centerY2, radius, 0, 2 * Math.PI, counterClockwise);
      context.lineWidth = 1;
    context.stroke();
  
    var grd = context.createLinearGradient(800, 600, 450, 150);
    grd.addColorStop(.05, "rgb(255,255,255)");
    grd.addColorStop(0.5, 'pink');
    grd.addColorStop(1, "rgb(255, 128, 191)");
    context.fillStyle = grd;
    context.fill();
  
      
    //SIDE BURNS 1
  
    context.beginPath();
    context.moveTo(180, 250);
    context.quadraticCurveTo(200, 350, 230, 350);
    context.quadraticCurveTo(200, 350, 235, 200);
    context.lineTo(180, 250);
    context.stroke();
  
    context.fillStyle = 'pink';
    context.fill();
  
    //SIDE BURN 2
  
    context.beginPath();
    context.moveTo(600, 250);
    context.quadraticCurveTo(595, 350, 535, 350);
    context.quadraticCurveTo(595, 350, 525, 200);
    context.lineTo(600, 250);
    context.stroke();
    context.fillStyle = 'pink';
    context.fill();
  
  

  
    //BANGS
  
    context.beginPath();
    //    context.beginPath();
    context.moveTo(160, 250);
    context.lineTo(250, 250);
    context.lineTo(290,200);
    context.lineTo(290,250);
    context.quadraticCurveTo(350, 220, 400, 250);
    context.lineTo(415, 200);
    context.lineTo(415, 250);
    context.quadraticCurveTo(430, 220, 490, 250);
    context.lineTo(515, 200);
    context.lineTo(520, 250);
    context.quadraticCurveTo(550, 250, 600, 300);
    context.quadraticCurveTo(605, 250, 600, 200);
    context.quadraticCurveTo(600, 190, 597, 180);
    context.quadraticCurveTo(595, 180, 595, 170);
    context.lineTo(595, 169);
    context.quadraticCurveTo(595, 160, 589, 160);
    context.lineTo(575, 100);
    context.quadraticCurveTo(565, 85, 560,75);
    context.lineTo(555, 70);
    context.quadraticCurveTo(553, 70, 550, 68);
    context.quadraticCurveTo(550, 55, 548, 50);
    context.quadraticCurveTo(545, 45, 540, 40);
    context.lineTo(500, 0);
    context.lineTo(300, 0);
    context.lineTo(260, 30);
    context.lineTo(255, 35);
    context.lineTo(250, 40);
    context.lineTo(245, 45);
    context.lineTo(240, 50);
    context.lineTo(200, 100);
    context.quadraticCurveTo(180, 130, 175, 140);
    context.quadraticCurveTo(170, 145, 165, 190);
    context.lineTo(160, 250);
    context.stroke();
    context.closePath();
  
    var grd = context.createLinearGradient(100, 250, 680, 150);
    grd.addColorStop(.05, "rgb(255,255,255)");
    grd.addColorStop(0.5, 'pink');
    grd.addColorStop(.75, "rgb(255, 128, 191)");
    grd.addColorStop(1, "rgb(255, 77, 166)");
    context.fillStyle = grd;
    context.fill();
  
  
    ///HAIR BOWS
  
  
  
  
  
  
  
  
  
  
  
  
    //EYEBALLS whites right
  
  
         var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 1.6;
      var centerY = canvas.height / 2;
      var radius = 35;
      var startAngle = 1.5 * Math.PI;
      var endAngle = 2.1 * Math.PI;
      var counterClockwise = false;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.lineWidth = 1;
    context.stroke();
    context.fillStyle = "white";
    context.fill();
    context.closePath();
  
    //eyeball right
     var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 1.6;
      var centerY = canvas.height / 2;
      var radius = 25;
      var startAngle = 1.5 * Math.PI;
      var endAngle = 2.1 * Math.PI;
      var counterClockwise = false;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.lineWidth = 1;
  
    context.stroke();
    context.closePath();

    context.fillStyle = "rgb(179, 198, 255)";
    context.fill();
    context.stroke();
    context.closePath();
  
  
    ///eyeball right periods
  
  
     var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 1.6;
      var centerY = canvas.height / 2;
      var radius = 10;
      var startAngle = 1.5 * Math.PI;
      var endAngle = 2.1 * Math.PI;
      var counterClockwise = false;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.lineWidth = 1;
  
    context.stroke();
    context.closePath();

    context.fillStyle = "cyan";
    context.fill();
    context.stroke();
    context.closePath();
  
  
     var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 1.6;
      var centerY = canvas.height / 2;
      var radius = 3;
      var startAngle = 1.5 * Math.PI;
      var endAngle = 2.1 * Math.PI;
      var counterClockwise = false;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.lineWidth = 1;
  
    context.stroke();
    context.closePath();

    context.fillStyle = "black";
    context.fill();
    context.stroke();
    context.closePath();
  
  
    //left eyeball whites
         var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 2.8;
      var centerY = canvas.height /2;
      var radius = 35;
      var startAngle = 2.1 * Math.PI;
      var endAngle = 4.1 * Math.PI;
      var counterClockwise = false;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.lineWidth = 1;
    context.stroke();
    context.fillStyle =  "white";
    context.fill();
    context.closePath
  
    //left eyeball
     var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 2.8;
      var centerY = canvas.height / 2;
      var radius = 25;
      var startAngle = 2.1 * Math.PI;
      var endAngle = 4.1 * Math.PI;
      var counterClockwise = false;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.lineWidth = 1;
    context.stroke();
    context.fillStyle = "cyan";
    context.fill();
  
    ///EYEBALL PERIOD

  
    var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 2.8;
      var centerY = canvas.height / 2;
      var radius = 10;
      var startAngle = 2.1 * Math.PI;
      var endAngle = 4.1 * Math.PI;
      var counterClockwise = false;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.lineWidth = 1;
    context.stroke();
    context.fillStyle = "rgb(179, 198, 255)";
    context.fill();
  
  
        var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 2.8;
      var centerY = canvas.height / 2;
      var radius = 3;
      var startAngle = 2.1 * Math.PI;
      var endAngle = 4.1 * Math.PI;
      var counterClockwise = false;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.lineWidth = 1;
    context.stroke();
    context.fillStyle = "black";
    context.fill();
  
    //EYES lashes
  
    context.beginPath();
    context.moveTo(230, 280);
    context.quadraticCurveTo(270, 250, 320, 280);
    context.quadraticCurveTo(290, 265, 230, 280);

    context.fillStyle = 'black';
    context.fill();
    context.stroke();
  
    //eye lash 2
        context.beginPath();
    context.moveTo(450, 280);
    context.quadraticCurveTo(520, 250, 550, 280);
    context.quadraticCurveTo(540, 265, 450, 280);
context.fillStyle = "black";
    context.fill();
  
  
    //SMILE
  
    context.beginPath();
    context.moveTo(350, 440);
    context.quadraticCurveTo(400, 460, 440, 440);
    context.lineTo(350, 440);
    context.stroke();
    context.fillStyle = "rgb(255, 173, 153)";
    context.fill();
  
    ///NOSE
  
    context.beginPath();
    context.moveTo(400,390);
    context.lineTo(415, 385);
    context.stroke();
  
  
  
    ////line to bowtie
  
        context.beginPath();
    context.moveTo(295, 550);
    context.lineTo(350, 550);
    context.lineWidth = 12;
    context.stroke();
    context.strokeStyle = "round";
      
    /////NECK FLOWER NECKLACE
  
  

                 var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 2.3;
      var centerY = canvas.height /1.1;
      var radius = 35;
      var startAngle = 2.1 * Math.PI;
      var endAngle = 4.1 * Math.PI;
      var counterClockwise = false;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.lineWidth = 1;
    context.stroke();
    context.fillStyle =  "yellow";
    context.fill();
    context.closePath();

                 var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 1.8;
      var centerY = canvas.height /1.1;
      var radius = 35;
      var startAngle = 2.1 * Math.PI;
      var endAngle = 4.1 * Math.PI;
      var counterClockwise = false;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.lineWidth = 1;
    context.stroke();
    context.fillStyle =  "grey";
    context.fill();
    context.closePath();
  
  
                 var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 2;
      var centerY = canvas.height /1.1;
      var radius = 25;
      var startAngle = 2.1 * Math.PI;
      var endAngle = 4.1 * Math.PI;
      var counterClockwise = false;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.lineWidth = 1;
    context.stroke();
    context.fillStyle =  "black";
    context.fill();
    context.closePath();
  
  
  
      
///HAIR BOWTIE
             var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 4.1;
      var centerY = canvas.height /6.5;
      var radius = 35;
      var startAngle = 2.1 * Math.PI;
      var endAngle = 4.1 * Math.PI;
      var counterClockwise = false;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.lineWidth = 1;
    context.stroke();
    context.fillStyle =  "magenta";
    context.fill();
    context.closePath();
  
  
             var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 4.3;
      var centerY = canvas.height /3.5;
      var radius = 35;
      var startAngle = 2.1 * Math.PI;
      var endAngle = 4.1 * Math.PI;
      var counterClockwise = false;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.lineWidth = 1;
    context.stroke();
    context.fillStyle =  "blue";
    context.fill();
    context.closePath();
  
    ///line
    context.beginPath();
    context.moveTo(180, 120);
    context.lineTo(199, 80);
    context.stroke();
  
  
    context.beginPath();
    context.moveTo(170, 120);
    context.lineTo(190, 190);
    context.stroke();
  
  
                 var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 4.5;
      var centerY = canvas.height /4.6;
      var radius = 25;
      var startAngle = 2.1 * Math.PI;
      var endAngle = 4.1 * Math.PI;
      var counterClockwise = false;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.lineWidth = 1;
    context.stroke();
    context.fillStyle =  "black";
    context.fill();
    context.closePath();

   

Comments

Post a Comment

Popular posts from this blog

Art 211: Performance art

Image
Jen was my partner! When we were thinking of my piece, I looked at things I usually enjoy. I enjoyed watching people recording and doing weird stuff in stores and always wondered if I could ever do that. Since I have an overwhelming sense of social anxiety, I try not to draw attention to myself, yet wish that I could do the things youtubers do best. My piece is based on just contently being yourself. I want to illustrate that you can be weird and do what you please in public, no matter what the public eye says. I see performance art as an interesting concept. from flash mobs to protest, performance art can really have an everlasting memory for those who see it. Some performance arts can be seen as extreme, and can be essentially violent to oneself, bodily harm to make a statement can be seen as too intense for public eyes, but it does make a statement. whether it reaches the peoples minds can be a challenge. When the performance is recorded I think a lot more people can see it
Read more