HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<canvas id="ctx" width="300" height="300" style="border:1px solid #d3d3d3;">
</canvas
</body>
</html>
JS:
var c = document.getElementById('ctx')
var ctx = c.getContext('2d');
var x = 100;
var y = 50;
var RADIUS = 80;
ctx.beginPath();
ctx.arc(x, y, RADIUS, Math.PI / 2, Math.PI); //sAngle 90 ,eAngle 180
ctx.fillStyle = '#333';
ctx.lineTo(x, y);
ctx.fill();
ctx.restore();
ctx.stroke();