<!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>
Получается диаграмма, но пятиугольник вылазит за пределы круга,, как сделать чтоб не вылазило, а было в пределах круга