Thursday, September 12, 2019

Arc Project



 context.beginPath();
      context.arc(150, 210, 80, -1, Math.PI, true);
      context.closePath();
      context.lineWidth = 5;
      context.fillStyle = "brown";
      context.fill();
      context.strokeStyle = '#550000';
      context.stroke();
  

context.beginPath();
      context.arc(150, 150, 70, 7, Math.PI, false);
      context.closePath();
      context.lineWidth = 5;
      context.fillStyle = "pink";
      context.fill();
      context.strokeStyle = '#550000';
      context.stroke();

context.beginPath();
      context.arc(250, 150, 70, 6, Math.PI, false);
      context.closePath();
      context.lineWidth = 5;
      context.fillStyle = "orange";
      context.fill();
      context.strokeStyle = '#550000';
      context.stroke();


context.beginPath();
      context.arc(325, 130, 90, 1, Math.PI, true);
      context.closePath();
      context.lineWidth = 5;
      context.fillStyle = "yellow";
      context.fill();
      context.strokeStyle = '#550060';
      context.stroke();

context.beginPath();
      context.arc(500, 150, 50, -.5, Math.PI, false);
      context.closePath();
      context.lineWidth = 5;
      context.fillStyle = "purple";
      context.fill();
      context.strokeStyle = '#550000';
      context.stroke();

context.beginPath();
      context.arc(450, 160, 30, -255, Math.PI, true);
      context.closePath();
      context.lineWidth = 5;
      context.fillStyle = "blue";
      context.fill();
      context.strokeStyle = '#550000';
      context.stroke();

context.beginPath();
      context.arc(400, 150, 50, -.5, Math.PI, true);
      context.closePath();
      context.lineWidth = 5;
      context.fillStyle = "purple";
      context.fill();
      context.strokeStyle = '#550000';
      context.stroke();

context.moveTo(550, 300);
      context.bezierCurveTo(200, 100, 500, 100, 100, 400);
      context.lineWidth = 10;

      // line color
      context.strokeStyle = 'pink';
      context.stroke();
  
 context.bezierCurveTo(300, 200, 300, 200, 300, 400);
      context.bezierCurveTo(250, 180, 320, 180, 340, 300);
      context.bezierCurveTo(420, 150, 420, 120, 300, 550);
      context.bezierCurveTo(430, 40, 370, 30, 400, 400);
      context.bezierCurveTo(320, 5, 250, 20, 250, 600);
      context.bezierCurveTo(200, 5, 150, 20, 170, 550);

      // complete custom shape
      context.closePath();
      context.lineWidth = 5;
      context.fillStyle = '#8ED6FF';
      context.fill();
      context.strokeStyle = 'blue';
      context.stroke();

context.closePath();
      context.lineWidth = 5;
      context.fillStyle = 'green';
      context.fill();
      context.strokeStyle = '#550000';
      context.stroke();
     

Portfolio