Canvas Project


          My canvas project is of a butterfly. I wanted my design to have a mosaic like aesthetic for the background. The butterfly is purple and pink while the background is yellow, orange, and blue. This project, although it may not look like it, took me around 12 hours. This project was really hard for me. I had no idea how to code or how to use dreamweaver, so this project was way out of my comfort zone. I'm not really tech savvy so I had to work had on this one. I'm  glad that I had assignment that took me out of my comfort zone, although it wasn't easy. I don't hate the way this turned out, I feel like I did a pretty good job given my technological abilities. I ran into problem during the process but took them as they came up and found a solution. Below is my sketch that I drew inspiration from.





My code

 /////background

context.beginPath();

  context.rect(60,0,70,70);

 context.closePath();

 context.fillStyle = "#FFF636";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();

context.beginPath();

  context.rect(0,0,70,70);

 context.closePath();

 context.fillStyle = "#F7AE3E";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();


context.beginPath();

  context.rect(0,60,100,100);

 context.closePath();

 context.fillStyle = "#BDB707";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();

context.beginPath();

  context.rect(60,530,70,70);

 context.closePath();

 context.fillStyle = "#FFF636";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();

context.beginPath();

  context.rect(0,530,70,70);

 context.closePath();

 context.fillStyle = "#F7AE3E";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();


context.beginPath();

  context.rect(0,440,100,100);

 context.closePath();

 context.fillStyle = "#BDB707";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();

context.beginPath();

  context.rect(670,0,70,70);

 context.closePath();

 context.fillStyle = "#FFF636";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();

context.beginPath();

  context.rect(735,0,70,70);

 context.closePath();

 context.fillStyle = "#F7AE3E";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();


context.beginPath();

  context.rect(700,60,100,100);

 context.closePath();

 context.fillStyle = "#BDB707";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();

context.beginPath();

  context.rect(670,530,70,70);

 context.closePath();

 context.fillStyle = "#FFF636";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();

context.beginPath();

  context.rect(735,530,70,70);

 context.closePath();

 context.fillStyle = "#F7AE3E";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();


context.beginPath();

  context.rect(700,430,100,100);

 context.closePath();

 context.fillStyle = "#BDB707";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();


context.beginPath();

  context.rect(130,0,150,150);

 context.closePath();

 context.fillStyle = "#B6F73E";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();

context.beginPath();

  context.rect(130,450,150,150);

 context.closePath();

 context.fillStyle = "#B6F73E";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();

context.beginPath();

  context.rect(520,0,150,150);

 context.closePath();

 context.fillStyle = "#B6F73E";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();

context.beginPath();

  context.rect(520,450,150,150);

 context.closePath();

 context.fillStyle = "#B6F73E";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();

context.beginPath();

  context.rect(90,60,70,130);

 context.closePath();

 context.fillStyle = "#7EF51E";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();

context.beginPath();

  context.rect(90,410,70,130);

 context.closePath();

 context.fillStyle = "#7EF51E";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();

context.beginPath();

  context.rect(650,60,70,130);

 context.closePath();

 context.fillStyle = "#7EF51E";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();

context.beginPath();

  context.rect(650,400,70,130);

 context.closePath();

 context.fillStyle = "#7EF51E";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();

context.beginPath();

  context.rect(110,120,580,360);

 context.closePath();

 context.fillStyle = "#87D8F9";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();

context.beginPath();

  context.rect(0,160,110,280);

 context.closePath();

 context.fillStyle = "#1EF5BE";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();

context.beginPath();

  context.rect(690,160,110,280);

 context.closePath();

 context.fillStyle = "#1EF5BE";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();

context.beginPath();

  context.rect(280,480,250,120);

 context.closePath();

 context.fillStyle = "#3EA2F7";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();

context.beginPath();

  context.rect(280,0,250,120);

 context.closePath();

 context.fillStyle = "#3EA2F7";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();



 ///////butterfly head 

var centerX = canvas.width / 2;

      var centerY = canvas.height / 3;

      var radius = 16;


      context.beginPath();

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

      context.fillStyle = '#2A0056';

      context.fill();

      context.lineWidth = 5;

      context.strokeStyle = '#2A0056';

      context.stroke();


var centerX = canvas.width / 2.6;

      var centerY = canvas.height / 1.83;

      var radius = 135;


      context.beginPath();

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

      context.fillStyle = '#FFC3FF';

      context.fill();

      context.lineWidth = 5;

      context.strokeStyle = '#FFC3FF';

      context.stroke();



 var centerX = canvas.width / 1.4;

      var centerY = canvas.height / 2.1;

      var radius = 135;


      context.beginPath();

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

      context.fillStyle = '#FFC3FF';

      context.fill();

      context.lineWidth = 5;

      context.strokeStyle = '#FFC3FF';

      context.stroke();

///////butterfly body 

 context.beginPath();

      context.moveTo(400, 200);

      context.quadraticCurveTo(500, 400, 400, 450);

      context.lineWidth = 13;


      // line color

      context.strokeStyle = '#2A0056';

      context.stroke();



///// wings

var centerX = canvas.width / 2.25;

      var centerY = canvas.height / 2.2;

      var radius = 60;


      context.beginPath();

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

      context.fillStyle = '#8D00FF';

      context.fill();

      context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();



 var centerX = canvas.width / 2.15;

      var centerY = canvas.height / 1.6;

      var radius = 60;


      context.beginPath();

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

      context.fillStyle = '#8D00FF';

      context.fill();

      context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();


 var centerX = canvas.width / 1.6;

      var centerY = canvas.height / 2.4;

      var radius = 60;


      context.beginPath();

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

      context.fillStyle = '#8D00FF';

      context.fill();

      context.lineWidth = 5;

      context.strokeStyle = '#020004';

      context.stroke();


var centerX = canvas.width / 1.54;

      var centerY = canvas.height / 1.7;

      var radius = 60;


      context.beginPath();

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

      context.fillStyle = '#8D00FF';

      context.fill();

      context.lineWidth = 5;

      context.strokeStyle = '#010003';

      context.stroke();

 

///// small light purple dots

var centerX = canvas.width / 2.6;

      var centerY = canvas.height / 2.8;

      var radius = 16;


      context.beginPath();

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

      context.fillStyle = '#E0C4FF';

      context.fill();

      context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();


var centerX = canvas.width / 1.45;

      var centerY = canvas.height / 3.1;

      var radius = 16;


      context.beginPath();

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

      context.fillStyle = '#E0C4FF';

      context.fill();

      context.lineWidth = 5;

      context.strokeStyle = '#010003';

      context.stroke();

///// square

context.beginPath();

  context.rect(280,315,40,40);

 context.closePath();

 context.fillStyle = "#7A0088";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();

context.beginPath();

  context.rect(550,275,40,40);

 context.closePath();

 context.fillStyle = "#7A0088";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();


////bezier curve in wing

var flower = 

        context.beginPath();

    context.moveTo(250,200);

    context.bezierCurveTo(200,300,250,280,270,380);

   

    context.closePath();

    context.fillStyle=flower;

    context.fill();

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

    context.stroke();

    

var flower = 

        context.beginPath();

    context.moveTo(250,350);

    context.bezierCurveTo(260,400,330,370,270,390);

   

    context.closePath();

    context.fillStyle=flower;

    context.fill();

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

    context.stroke();


/////circles in wings

var centerX = canvas.width / 1.93;

      var centerY = canvas.height / 2.;

      var radius = 16;


      context.beginPath();

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

      context.fillStyle = '#C015BC';

      context.fill();

      context.lineWidth = 5;

      context.strokeStyle = '#C015BC';

      context.stroke();

var centerX = canvas.width / 1.9;

      var centerY = canvas.height / 1.8;

      var radius = 16;


      context.beginPath();

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

      context.fillStyle = '#C015BC';

      context.fill();

      context.lineWidth = 5;

      context.strokeStyle = '#C015BC';

      context.stroke();

 

var centerX = canvas.width / 2;

      var centerY = canvas.height / 1.9;

      var radius = 16;


      context.beginPath();

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

      context.fillStyle = '#C015BC';

      context.fill();

      context.lineWidth = 5;

      context.strokeStyle = '#ED0CE7';

      context.stroke();

 


var centerX = canvas.width / 1.73;

      var centerY = canvas.height / 2.09;

      var radius = 16;


      context.beginPath();

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

      context.fillStyle = '#C015BC';

      context.fill();

      context.lineWidth = 5;

      context.strokeStyle = '#C015BC';

      context.stroke();

 

var centerX = canvas.width / 1.7;

      var centerY = canvas.height / 1.9;

      var radius = 16;


      context.beginPath();

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

      context.fillStyle = '#C015BC';

      context.fill();

      context.lineWidth = 5;

      context.strokeStyle = '#C015BC';

      context.stroke();

var centerX = canvas.width / 1.65;

      var centerY = canvas.height / 2.04;

      var radius = 16;


      context.beginPath();

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

      context.fillStyle = '#C015BC';

      context.fill();

      context.lineWidth = 5;

      context.strokeStyle = '#EC1BEC';

      context.stroke();

var centerX = canvas.width / 1.2;

      var centerY = canvas.height / 2.04;

      var radius = 16;


      context.beginPath();

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

      context.fillStyle = '#C015BC';

      context.fill();

      context.lineWidth = 5;

      context.strokeStyle = '#C015BC';

      context.stroke();

var centerX = canvas.width / 1.3;

      var centerY = canvas.height / 1.7;

      var radius = 16;


      context.beginPath();

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

      context.fillStyle = '#C015BC';

      context.fill();

      context.lineWidth = 5;

      context.strokeStyle = '#C015BC';

      context.stroke();

var centerX = canvas.width / 1.25;

      var centerY = canvas.height / 2.8;

      var radius = 16;


      context.beginPath();

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

      context.fillStyle = '#C015BC';

      context.fill();

      context.lineWidth = 5;

      context.strokeStyle = '#C015BC';

      context.stroke();

var centerX = canvas.width / 3.7;

      var centerY = canvas.height / 1.7;

      var radius = 16;


      context.beginPath();

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

      context.fillStyle = '#C015BC';

      context.fill();

      context.lineWidth = 5;

      context.strokeStyle = '#C015BC';

      context.stroke();

var centerX = canvas.width / 3.;

      var centerY = canvas.height / 1.4;

      var radius = 16;


      context.beginPath();

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

      context.fillStyle = '#C015BC';

      context.fill();

      context.lineWidth = 5;

      context.strokeStyle = '#C015BC';

      context.stroke();

////squares in wings

context.beginPath();

  context.rect(200,305,20,20);

 context.closePath();

 context.fillStyle = "#A255D1";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#A255D1';

      context.stroke();

context.beginPath();

  context.rect(230,390,20,20);

 context.closePath();

 context.fillStyle = "#A255D1";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#A255D1';

      context.stroke();

context.beginPath();

  context.rect(600,380,20,20);

 context.closePath();

 context.fillStyle = "#A255D1";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#A255D1';

      context.stroke();

context.beginPath();

  context.rect(620,280,20,20);

 context.closePath();

 context.fillStyle = "#A255D1";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#A255D1';

      context.stroke();

context.beginPath();

  context.rect(600,180,20,20);

 context.closePath();

 context.fillStyle = "#A255D1";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#A255D1';

      context.stroke();

 /////background

context.beginPath();

  context.rect(60,0,70,70);

 context.closePath();

 context.fillStyle = "#FFF636";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();

context.beginPath();

  context.rect(0,0,70,70);

 context.closePath();

 context.fillStyle = "#F7AE3E";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();


context.beginPath();

  context.rect(0,60,100,100);

 context.closePath();

 context.fillStyle = "#BDB707";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();

context.beginPath();

  context.rect(60,530,70,70);

 context.closePath();

 context.fillStyle = "#FFF636";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();

context.beginPath();

  context.rect(0,530,70,70);

 context.closePath();

 context.fillStyle = "#F7AE3E";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();


context.beginPath();

  context.rect(0,440,100,100);

 context.closePath();

 context.fillStyle = "#BDB707";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();

context.beginPath();

  context.rect(670,0,70,70);

 context.closePath();

 context.fillStyle = "#FFF636";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();

context.beginPath();

  context.rect(735,0,70,70);

 context.closePath();

 context.fillStyle = "#F7AE3E";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();


context.beginPath();

  context.rect(700,60,100,100);

 context.closePath();

 context.fillStyle = "#BDB707";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();

context.beginPath();

  context.rect(670,530,70,70);

 context.closePath();

 context.fillStyle = "#FFF636";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();

context.beginPath();

  context.rect(735,530,70,70);

 context.closePath();

 context.fillStyle = "#F7AE3E";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();


context.beginPath();

  context.rect(700,430,100,100);

 context.closePath();

 context.fillStyle = "#BDB707";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();


context.beginPath();

  context.rect(130,0,150,150);

 context.closePath();

 context.fillStyle = "#B6F73E";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();

context.beginPath();

  context.rect(130,450,150,150);

 context.closePath();

 context.fillStyle = "#B6F73E";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();

context.beginPath();

  context.rect(520,0,150,150);

 context.closePath();

 context.fillStyle = "#B6F73E";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();

context.beginPath();

  context.rect(520,450,150,150);

 context.closePath();

 context.fillStyle = "#B6F73E";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();

context.beginPath();

  context.rect(90,60,70,130);

 context.closePath();

 context.fillStyle = "#7EF51E";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();

context.beginPath();

  context.rect(90,410,70,130);

 context.closePath();

 context.fillStyle = "#7EF51E";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();

context.beginPath();

  context.rect(650,60,70,130);

 context.closePath();

 context.fillStyle = "#7EF51E";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();

context.beginPath();

  context.rect(650,400,70,130);

 context.closePath();

 context.fillStyle = "#7EF51E";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();

context.beginPath();

  context.rect(110,120,580,360);

 context.closePath();

 context.fillStyle = "#87D8F9";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();

context.beginPath();

  context.rect(0,160,110,280);

 context.closePath();

 context.fillStyle = "#1EF5BE";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();

context.beginPath();

  context.rect(690,160,110,280);

 context.closePath();

 context.fillStyle = "#1EF5BE";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();

context.beginPath();

  context.rect(280,480,250,120);

 context.closePath();

 context.fillStyle = "#3EA2F7";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();

context.beginPath();

  context.rect(280,0,250,120);

 context.closePath();

 context.fillStyle = "#3EA2F7";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();



 ///////butterfly head 

var centerX = canvas.width / 2;

      var centerY = canvas.height / 3;

      var radius = 16;


      context.beginPath();

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

      context.fillStyle = '#2A0056';

      context.fill();

      context.lineWidth = 5;

      context.strokeStyle = '#2A0056';

      context.stroke();


var centerX = canvas.width / 2.6;

      var centerY = canvas.height / 1.83;

      var radius = 135;


      context.beginPath();

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

      context.fillStyle = '#FFC3FF';

      context.fill();

      context.lineWidth = 5;

      context.strokeStyle = '#FFC3FF';

      context.stroke();



 var centerX = canvas.width / 1.4;

      var centerY = canvas.height / 2.1;

      var radius = 135;


      context.beginPath();

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

      context.fillStyle = '#FFC3FF';

      context.fill();

      context.lineWidth = 5;

      context.strokeStyle = '#FFC3FF';

      context.stroke();

///////butterfly body 

 context.beginPath();

      context.moveTo(400, 200);

      context.quadraticCurveTo(500, 400, 400, 450);

      context.lineWidth = 13;


      // line color

      context.strokeStyle = '#2A0056';

      context.stroke();



///// wings

var centerX = canvas.width / 2.25;

      var centerY = canvas.height / 2.2;

      var radius = 60;


      context.beginPath();

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

      context.fillStyle = '#8D00FF';

      context.fill();

      context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();



 var centerX = canvas.width / 2.15;

      var centerY = canvas.height / 1.6;

      var radius = 60;


      context.beginPath();

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

      context.fillStyle = '#8D00FF';

      context.fill();

      context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();


 var centerX = canvas.width / 1.6;

      var centerY = canvas.height / 2.4;

      var radius = 60;


      context.beginPath();

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

      context.fillStyle = '#8D00FF';

      context.fill();

      context.lineWidth = 5;

      context.strokeStyle = '#020004';

      context.stroke();


var centerX = canvas.width / 1.54;

      var centerY = canvas.height / 1.7;

      var radius = 60;


      context.beginPath();

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

      context.fillStyle = '#8D00FF';

      context.fill();

      context.lineWidth = 5;

      context.strokeStyle = '#010003';

      context.stroke();

 

///// small light purple dots

var centerX = canvas.width / 2.6;

      var centerY = canvas.height / 2.8;

      var radius = 16;


      context.beginPath();

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

      context.fillStyle = '#E0C4FF';

      context.fill();

      context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();


var centerX = canvas.width / 1.45;

      var centerY = canvas.height / 3.1;

      var radius = 16;


      context.beginPath();

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

      context.fillStyle = '#E0C4FF';

      context.fill();

      context.lineWidth = 5;

      context.strokeStyle = '#010003';

      context.stroke();

///// square

context.beginPath();

  context.rect(280,315,40,40);

 context.closePath();

 context.fillStyle = "#7A0088";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();

context.beginPath();

  context.rect(550,275,40,40);

 context.closePath();

 context.fillStyle = "#7A0088";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();


////bezier curve in wing

var flower = 

        context.beginPath();

    context.moveTo(250,200);

    context.bezierCurveTo(200,300,250,280,270,380);

   

    context.closePath();

    context.fillStyle=flower;

    context.fill();

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

    context.stroke();

    

var flower = 

        context.beginPath();

    context.moveTo(250,350);

    context.bezierCurveTo(260,400,330,370,270,390);

   

    context.closePath();

    context.fillStyle=flower;

    context.fill();

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

    context.stroke();


/////circles in wings

var centerX = canvas.width / 1.93;

      var centerY = canvas.height / 2.;

      var radius = 16;


      context.beginPath();

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

      context.fillStyle = '#C015BC';

      context.fill();

      context.lineWidth = 5;

      context.strokeStyle = '#C015BC';

      context.stroke();

var centerX = canvas.width / 1.9;

      var centerY = canvas.height / 1.8;

      var radius = 16;


      context.beginPath();

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

      context.fillStyle = '#C015BC';

      context.fill();

      context.lineWidth = 5;

      context.strokeStyle = '#C015BC';

      context.stroke();

 

var centerX = canvas.width / 2;

      var centerY = canvas.height / 1.9;

      var radius = 16;


      context.beginPath();

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

      context.fillStyle = '#C015BC';

      context.fill();

      context.lineWidth = 5;

      context.strokeStyle = '#ED0CE7';

      context.stroke();

 


var centerX = canvas.width / 1.73;

      var centerY = canvas.height / 2.09;

      var radius = 16;


      context.beginPath();

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

      context.fillStyle = '#C015BC';

      context.fill();

      context.lineWidth = 5;

      context.strokeStyle = '#C015BC';

      context.stroke();

 

var centerX = canvas.width / 1.7;

      var centerY = canvas.height / 1.9;

      var radius = 16;


      context.beginPath();

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

      context.fillStyle = '#C015BC';

      context.fill();

      context.lineWidth = 5;

      context.strokeStyle = '#C015BC';

      context.stroke();

var centerX = canvas.width / 1.65;

      var centerY = canvas.height / 2.04;

      var radius = 16;


      context.beginPath();

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

      context.fillStyle = '#C015BC';

      context.fill();

      context.lineWidth = 5;

      context.strokeStyle = '#EC1BEC';

      context.stroke();

var centerX = canvas.width / 1.2;

      var centerY = canvas.height / 2.04;

      var radius = 16;


      context.beginPath();

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

      context.fillStyle = '#C015BC';

      context.fill();

      context.lineWidth = 5;

      context.strokeStyle = '#C015BC';

      context.stroke();

var centerX = canvas.width / 1.3;

      var centerY = canvas.height / 1.7;

      var radius = 16;


      context.beginPath();

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

      context.fillStyle = '#C015BC';

      context.fill();

      context.lineWidth = 5;

      context.strokeStyle = '#C015BC';

      context.stroke();

var centerX = canvas.width / 1.25;

      var centerY = canvas.height / 2.8;

      var radius = 16;


      context.beginPath();

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

      context.fillStyle = '#C015BC';

      context.fill();

      context.lineWidth = 5;

      context.strokeStyle = '#C015BC';

      context.stroke();

var centerX = canvas.width / 3.7;

      var centerY = canvas.height / 1.7;

      var radius = 16;


      context.beginPath();

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

      context.fillStyle = '#C015BC';

      context.fill();

      context.lineWidth = 5;

      context.strokeStyle = '#C015BC';

      context.stroke();

var centerX = canvas.width / 3.;

      var centerY = canvas.height / 1.4;

      var radius = 16;


      context.beginPath();

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

      context.fillStyle = '#C015BC';

      context.fill();

      context.lineWidth = 5;

      context.strokeStyle = '#C015BC';

      context.stroke();

////squares in wings

context.beginPath();

  context.rect(200,305,20,20);

 context.closePath();

 context.fillStyle = "#A255D1";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#A255D1';

      context.stroke();

context.beginPath();

  context.rect(230,390,20,20);

 context.closePath();

 context.fillStyle = "#A255D1";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#A255D1';

      context.stroke();

context.beginPath();

  context.rect(600,380,20,20);

 context.closePath();

 context.fillStyle = "#A255D1";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#A255D1';

      context.stroke();

context.beginPath();

  context.rect(620,280,20,20);

 context.closePath();

 context.fillStyle = "#A255D1";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#A255D1';

      context.stroke();

context.beginPath();

  context.rect(600,180,20,20);

 context.closePath();

 context.fillStyle = "#A255D1";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#A255D1';

      context.stroke();

 /////background

context.beginPath();

  context.rect(60,0,70,70);

 context.closePath();

 context.fillStyle = "#FFF636";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();

context.beginPath();

  context.rect(0,0,70,70);

 context.closePath();

 context.fillStyle = "#F7AE3E";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();


context.beginPath();

  context.rect(0,60,100,100);

 context.closePath();

 context.fillStyle = "#BDB707";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();

context.beginPath();

  context.rect(60,530,70,70);

 context.closePath();

 context.fillStyle = "#FFF636";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();

context.beginPath();

  context.rect(0,530,70,70);

 context.closePath();

 context.fillStyle = "#F7AE3E";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();


context.beginPath();

  context.rect(0,440,100,100);

 context.closePath();

 context.fillStyle = "#BDB707";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();

context.beginPath();

  context.rect(670,0,70,70);

 context.closePath();

 context.fillStyle = "#FFF636";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();

context.beginPath();

  context.rect(735,0,70,70);

 context.closePath();

 context.fillStyle = "#F7AE3E";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();


context.beginPath();

  context.rect(700,60,100,100);

 context.closePath();

 context.fillStyle = "#BDB707";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();

context.beginPath();

  context.rect(670,530,70,70);

 context.closePath();

 context.fillStyle = "#FFF636";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();

context.beginPath();

  context.rect(735,530,70,70);

 context.closePath();

 context.fillStyle = "#F7AE3E";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();


context.beginPath();

  context.rect(700,430,100,100);

 context.closePath();

 context.fillStyle = "#BDB707";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();


context.beginPath();

  context.rect(130,0,150,150);

 context.closePath();

 context.fillStyle = "#B6F73E";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();

context.beginPath();

  context.rect(130,450,150,150);

 context.closePath();

 context.fillStyle = "#B6F73E";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();

context.beginPath();

  context.rect(520,0,150,150);

 context.closePath();

 context.fillStyle = "#B6F73E";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();

context.beginPath();

  context.rect(520,450,150,150);

 context.closePath();

 context.fillStyle = "#B6F73E";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();

context.beginPath();

  context.rect(90,60,70,130);

 context.closePath();

 context.fillStyle = "#7EF51E";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();

context.beginPath();

  context.rect(90,410,70,130);

 context.closePath();

 context.fillStyle = "#7EF51E";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();

context.beginPath();

  context.rect(650,60,70,130);

 context.closePath();

 context.fillStyle = "#7EF51E";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();

context.beginPath();

  context.rect(650,400,70,130);

 context.closePath();

 context.fillStyle = "#7EF51E";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();

context.beginPath();

  context.rect(110,120,580,360);

 context.closePath();

 context.fillStyle = "#87D8F9";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();

context.beginPath();

  context.rect(0,160,110,280);

 context.closePath();

 context.fillStyle = "#1EF5BE";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();

context.beginPath();

  context.rect(690,160,110,280);

 context.closePath();

 context.fillStyle = "#1EF5BE";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();

context.beginPath();

  context.rect(280,480,250,120);

 context.closePath();

 context.fillStyle = "#3EA2F7";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();

context.beginPath();

  context.rect(280,0,250,120);

 context.closePath();

 context.fillStyle = "#3EA2F7";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();



 ///////butterfly head 

var centerX = canvas.width / 2;

      var centerY = canvas.height / 3;

      var radius = 16;


      context.beginPath();

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

      context.fillStyle = '#2A0056';

      context.fill();

      context.lineWidth = 5;

      context.strokeStyle = '#2A0056';

      context.stroke();


var centerX = canvas.width / 2.6;

      var centerY = canvas.height / 1.83;

      var radius = 135;


      context.beginPath();

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

      context.fillStyle = '#FFC3FF';

      context.fill();

      context.lineWidth = 5;

      context.strokeStyle = '#FFC3FF';

      context.stroke();



 var centerX = canvas.width / 1.4;

      var centerY = canvas.height / 2.1;

      var radius = 135;


      context.beginPath();

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

      context.fillStyle = '#FFC3FF';

      context.fill();

      context.lineWidth = 5;

      context.strokeStyle = '#FFC3FF';

      context.stroke();

///////butterfly body 

 context.beginPath();

      context.moveTo(400, 200);

      context.quadraticCurveTo(500, 400, 400, 450);

      context.lineWidth = 13;


      // line color

      context.strokeStyle = '#2A0056';

      context.stroke();



///// wings

var centerX = canvas.width / 2.25;

      var centerY = canvas.height / 2.2;

      var radius = 60;


      context.beginPath();

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

      context.fillStyle = '#8D00FF';

      context.fill();

      context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();



 var centerX = canvas.width / 2.15;

      var centerY = canvas.height / 1.6;

      var radius = 60;


      context.beginPath();

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

      context.fillStyle = '#8D00FF';

      context.fill();

      context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();


 var centerX = canvas.width / 1.6;

      var centerY = canvas.height / 2.4;

      var radius = 60;


      context.beginPath();

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

      context.fillStyle = '#8D00FF';

      context.fill();

      context.lineWidth = 5;

      context.strokeStyle = '#020004';

      context.stroke();


var centerX = canvas.width / 1.54;

      var centerY = canvas.height / 1.7;

      var radius = 60;


      context.beginPath();

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

      context.fillStyle = '#8D00FF';

      context.fill();

      context.lineWidth = 5;

      context.strokeStyle = '#010003';

      context.stroke();

 

///// small light purple dots

var centerX = canvas.width / 2.6;

      var centerY = canvas.height / 2.8;

      var radius = 16;


      context.beginPath();

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

      context.fillStyle = '#E0C4FF';

      context.fill();

      context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();


var centerX = canvas.width / 1.45;

      var centerY = canvas.height / 3.1;

      var radius = 16;


      context.beginPath();

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

      context.fillStyle = '#E0C4FF';

      context.fill();

      context.lineWidth = 5;

      context.strokeStyle = '#010003';

      context.stroke();

///// square

context.beginPath();

  context.rect(280,315,40,40);

 context.closePath();

 context.fillStyle = "#7A0088";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();

context.beginPath();

  context.rect(550,275,40,40);

 context.closePath();

 context.fillStyle = "#7A0088";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#000000';

      context.stroke();


////bezier curve in wing

var flower = 

        context.beginPath();

    context.moveTo(250,200);

    context.bezierCurveTo(200,300,250,280,270,380);

   

    context.closePath();

    context.fillStyle=flower;

    context.fill();

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

    context.stroke();

    

var flower = 

        context.beginPath();

    context.moveTo(250,350);

    context.bezierCurveTo(260,400,330,370,270,390);

   

    context.closePath();

    context.fillStyle=flower;

    context.fill();

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

    context.stroke();


/////circles in wings

var centerX = canvas.width / 1.93;

      var centerY = canvas.height / 2.;

      var radius = 16;


      context.beginPath();

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

      context.fillStyle = '#C015BC';

      context.fill();

      context.lineWidth = 5;

      context.strokeStyle = '#C015BC';

      context.stroke();

var centerX = canvas.width / 1.9;

      var centerY = canvas.height / 1.8;

      var radius = 16;


      context.beginPath();

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

      context.fillStyle = '#C015BC';

      context.fill();

      context.lineWidth = 5;

      context.strokeStyle = '#C015BC';

      context.stroke();

 

var centerX = canvas.width / 2;

      var centerY = canvas.height / 1.9;

      var radius = 16;


      context.beginPath();

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

      context.fillStyle = '#C015BC';

      context.fill();

      context.lineWidth = 5;

      context.strokeStyle = '#ED0CE7';

      context.stroke();

 


var centerX = canvas.width / 1.73;

      var centerY = canvas.height / 2.09;

      var radius = 16;


      context.beginPath();

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

      context.fillStyle = '#C015BC';

      context.fill();

      context.lineWidth = 5;

      context.strokeStyle = '#C015BC';

      context.stroke();

 

var centerX = canvas.width / 1.7;

      var centerY = canvas.height / 1.9;

      var radius = 16;


      context.beginPath();

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

      context.fillStyle = '#C015BC';

      context.fill();

      context.lineWidth = 5;

      context.strokeStyle = '#C015BC';

      context.stroke();

var centerX = canvas.width / 1.65;

      var centerY = canvas.height / 2.04;

      var radius = 16;


      context.beginPath();

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

      context.fillStyle = '#C015BC';

      context.fill();

      context.lineWidth = 5;

      context.strokeStyle = '#EC1BEC';

      context.stroke();

var centerX = canvas.width / 1.2;

      var centerY = canvas.height / 2.04;

      var radius = 16;


      context.beginPath();

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

      context.fillStyle = '#C015BC';

      context.fill();

      context.lineWidth = 5;

      context.strokeStyle = '#C015BC';

      context.stroke();

var centerX = canvas.width / 1.3;

      var centerY = canvas.height / 1.7;

      var radius = 16;


      context.beginPath();

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

      context.fillStyle = '#C015BC';

      context.fill();

      context.lineWidth = 5;

      context.strokeStyle = '#C015BC';

      context.stroke();

var centerX = canvas.width / 1.25;

      var centerY = canvas.height / 2.8;

      var radius = 16;


      context.beginPath();

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

      context.fillStyle = '#C015BC';

      context.fill();

      context.lineWidth = 5;

      context.strokeStyle = '#C015BC';

      context.stroke();

var centerX = canvas.width / 3.7;

      var centerY = canvas.height / 1.7;

      var radius = 16;


      context.beginPath();

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

      context.fillStyle = '#C015BC';

      context.fill();

      context.lineWidth = 5;

      context.strokeStyle = '#C015BC';

      context.stroke();

var centerX = canvas.width / 3.;

      var centerY = canvas.height / 1.4;

      var radius = 16;


      context.beginPath();

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

      context.fillStyle = '#C015BC';

      context.fill();

      context.lineWidth = 5;

      context.strokeStyle = '#C015BC';

      context.stroke();

////squares in wings

context.beginPath();

  context.rect(200,305,20,20);

 context.closePath();

 context.fillStyle = "#A255D1";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#A255D1';

      context.stroke();

context.beginPath();

  context.rect(230,390,20,20);

 context.closePath();

 context.fillStyle = "#A255D1";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#A255D1';

      context.stroke();

context.beginPath();

  context.rect(600,380,20,20);

 context.closePath();

 context.fillStyle = "#A255D1";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#A255D1';

      context.stroke();

context.beginPath();

  context.rect(620,280,20,20);

 context.closePath();

 context.fillStyle = "#A255D1";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#A255D1';

      context.stroke();

context.beginPath();

  context.rect(600,180,20,20);

 context.closePath();

 context.fillStyle = "#A255D1";

 context.fill();

context.lineWidth = 5;

      context.strokeStyle = '#A255D1';

      context.stroke();





 

Comments

  1. Redieat AbebeNovember 5, 2020 at 9:18 AM

    I really like this cubic and mosaic approach to your canvas project. I think the shapes you used easily communicate the shape of a butterfly but you could also add the antennae to complete the look. Your butterfly contrasts well from your background and the shades of purple you used for the butterfly give it great dimension. Great project!

    ReplyDelete
  2. Eileen ClesiNovember 19, 2020 at 11:31 AM

    This looks amazing. I really like how the squares and rectangles are symmetrical on each side. I can clearly tell that it was a butterfly without looking at your sketch. You could not tell that your not tech savvy because it turned out amazing. Great job!

    ReplyDelete

Post a Comment

Popular posts from this blog

Autoscopy

Image
original;  This is my autoscopy self-portrait. It includes a photo of me on a chair. I removed the background on the photo of me. I put myself and the chair on a photo of the ocean. I changed some filters to make the ocean darker. I then put a photo of the starry night sky above the ocean. I put dolphins in the ocean. I then put the alien and planets in the sky and changed the filters on those as well. The photo of the alien was a stock photo so I also had to remove the watermark. I then changed the color of my pants and the color of my hair. Finally I added my logo to the corner.
Read more

Business cards

Image
 My three business cards are above. They all use a different version of my color logo. The first one has the blue and pink color theme. The second one uses the black and white logo with a pastel background. The third one uses the rainbow color theme. All have my email, phone number, and instagram. The instagram was added because that is one of the best places to reach me. My favorite business card is the second one that is pastel.  sketches;
Read more

somewhere project

Image
original image   Image I took final image My somewhere project is a photo of me in a scene from the mean girls movie. This is one of my favorite movies. I dressed up in clothing that i felt fitted the scene and took a photo posing in a similar way as the girls. I placed myself to the right of the girls because there was a lot of extra space. I included my brush tag on the cup I am holding. I changed the settings on my photo to try and make it fit better in the scene. I also added a white brush stroke and changed the type of mask it was to make it look like the light that is peeking through from the back of the photo.
Read more