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