Javascript-форум - убрать за границами

<!DOCTYPE HTML>
<html>
<body>   
<title>canvas</title>
  <meta charset="utf-8">
  
<script> 
   window.onload = function() {
    var drawingCanvas = document.getElementById('smile');
    if(drawingCanvas && drawingCanvas.getContext) {
     var context = drawingCanvas.getContext('2d');
     // Рисуем окружность
     context.strokeStyle = "#000";
     context.fillStyle = "#fc0";
     context.beginPath();
     context.arc(100,100,50,0,Math.PI*2,true);
     context.closePath();
     context.stroke();
     context.fill();
    
 
context.beginPath();
     context.moveTo(100,100);
     context.quadraticCurveTo(-50,330,0,315);
     context.quadraticCurveTo(-10,330,330,5);
     context.closePath();
     context.stroke();
     context.fill();
    }
    }
  </script>
 </head>
<canvas id="smile" width="200" height="200">


</body>
</html>

Получается диаграмма, но пятиугольник вылазит за пределы круга,, как сделать чтоб не вылазило, а было в пределах круга