Refer Tutorial
How to draw Custom Shape in HTML5 Canvas Element
<canvas id="customShapes" width="500" height="250"></canvas>
<script>
var canvas = document.getElementById('customShapes');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(180, 90);
context.lineWidth = 8;
context.strokeStyle = '#e53d37';
context.moveTo(170, 80);
context.bezierCurveTo(140, 110, 140, 160, 240, 160);
context.bezierCurveTo(260, 190, 330, 190, 350, 160);
context.bezierCurveTo(430, 160, 430, 130, 400, 100);
context.bezierCurveTo(440, 50, 380, 40, 350, 60);
context.bezierCurveTo(330, 15, 260, 30, 260, 60);
context.bezierCurveTo(210, 15, 160, 30, 180, 90);
context.fillStyle = '#a69c9c';
context.fill();
context.closePath();
context.stroke();
</script>
Beginners guide to HTML5 Canvas - Draw shapes
How to draw Rectangle in HTML5 Canvas Element
<canvas id="rectangle" width="500" height="250"></canvas>
<script>
var canvas = document.getElementById('rectangle');
var context = canvas.getContext('2d');
context.beginPath();
context.rect(100, 40, 100, 180);
context.fillStyle = '#2d78ba';
context.fill();
context.lineWidth = 8;
context.strokeStyle = '#e53d37';
context.stroke();
</script>
how to create circle in Canvas Element?
<canvas id="circle" width="500" height="250"></canvas>
<script>
var canvas = document.getElementById('circle');
var context = canvas.getContext('2d');
var center_X = canvas.width / 2;
var center_Y = canvas.height / 2;
var radius = 80;
context.beginPath();
context.arc(center_X, center_Y, radius, 0, 2 * Math.PI, false);
context.fillStyle = '#f7ca0f';
context.fill();
context.lineWidth = 8;
context.strokeStyle = '#e53d37';
context.stroke();
</script>
Beginners guide to HTML5 Canvas - Draw shapes
How to draw Semicircle in Canvas?
<canvas id="semiCircle" width="500" height="250"></canvas>
<script>
var canvas = document.getElementById('semiCircle');
var context = canvas.getContext('2d');
context.beginPath();
var center_X = canvas.width / 2;
var center_Y = canvas.height / 2;
var radius = 80;
context.arc(center_X, center_Y, radius, 0, Math.PI, false);
context.closePath();
context.lineWidth = 8;
context.fillStyle = '#0b930a';
context.fill();
context.strokeStyle = '#e53d37';
context.stroke();
</script>
Beginners guide to HTML5 Canvas - Draw shapes