1- Custom shape in Canvas

If you need to create a custom shape with HTML5 Canvas, first you have to create a path and then close it using the closePath() method. Use the lineTo(), arcTo(), quadraticCurveTo(), or bezierCurveTo() methods to construct each subpath which makes up your shape.

script :-

<script>
  var canvas = document.getElementById('myCanvas1');
  var context = canvas.getContext('2d');

  // begin custom shape
  context.beginPath();
  context.moveTo(170, 80);
  context.bezierCurveTo(130, 100, 130, 150, 230, 150);
  context.bezierCurveTo(250, 180, 320, 180, 340, 150);
  context.bezierCurveTo(420, 150, 420, 120, 390, 100);
  context.bezierCurveTo(430, 40, 370, 30, 340, 50);
  context.bezierCurveTo(320, 5, 250, 20, 250, 50);
  context.bezierCurveTo(200, 5, 150, 20, 170, 80);

  // complete custom shape
  context.closePath();
  context.lineWidth = 5;
  context.strokeStyle = 'blue';
  context.stroke();
</script>

HTML :-

<canvas id="myCanvas1" width="578" height="200"></canvas>

2- Rectangle shape in Canvas

If you want to create a rectangle using HTML5 Canvas, you can use the rect() method. x and y parameters is used for positioning and height and width parameters are used for sizing an HTML5 Canvas rectangle. Also the rectangle is positioned about its top left corner.

script :-

<script>
      var canvas = document.getElementById('myCanvas2');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.rect(188, 50, 200, 100);
      context.fillStyle = 'yellow';
      context.fill();
      context.lineWidth = 7;
      context.strokeStyle = 'black';
      context.stroke();
</script>

HMTL :-

<canvas id="myCanvas2" width="578" height="200"></canvas>

3- Circle shape in Canvas

If you want to draw a circle with HTML5 Canvas, First you have to create a full arc and define the starting angle as 0 and the ending angle as 2 * PI by using the arc() method.

script :-

<script>
      var canvas = document.getElementById('myCanvas3');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 2;
      var centerY = canvas.height / 2;
      var radius = 70;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'green';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = '#003300';
      context.stroke();
</script>

HTML :-

 <canvas id="myCanvas3" width="578" height="200"></canvas>

4- Semicircle shape in Canvas

If you want to create a semicircle with HTML5 Canvas, First create an arc using the arc() method and then define the ending angle has startAngle + PI.

script :-

<script>
      var canvas = document.getElementById('myCanvas4');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(288, 75, 70, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 5;
      context.fillStyle = 'red';
      context.fill();
      context.strokeStyle = '#550000';
      context.stroke();
</script>

HTML :-

<canvas id="myCanvas4" width="578" height="200"></canvas>