Проблема с заполнением формы на холсте

Question

Мне нужно создать пользовательскую форму в Canvas для отображения графика в форме человека. Я создал форму, но когда я пытаюсь ее заполнить, она не заполняется должным образом. то есть какая-то часть отсутствует, а некоторые переполнены.

Это ссылка на мой демо: http://jsfiddle.net/vqbjqndm/

var canvas = document.getElementById('myCanvas'); 
    var context = canvas.getContext('2d'); 

    context.beginPath(); 

    context.arc(65,60 ,35,0,Math.PI*2,true); 

    context.moveTo(5,100); 
    context.lineTo(5, 300); 
    context.moveTo(35,300); 
    context.arc(20, 300, 15, 0, Math.PI); 

    context.moveTo(35,300); 
    context.lineTo(35, 250); 
    context.lineTo(95, 250); 
    context.lineTo(95, 300); 

    context.moveTo(125,300); 
    context.arc(110, 300, 15, 0, Math.PI); 
    context.moveTo(125,300); 
    context.lineTo(125,100); 
    context.lineTo(5, 100); 

    context.fill(); 

Answer 1

Вы получаете в неприятности, когда вы рисуете на cirles.

Вы находитесь на (5, 300), затем переходите к (35,300), и теперь вы возвращаете круг назад (5, 100), затем возвращаетесь обратно (35, 300). Это замаскирует маску.

Вместо этого, вы можете нарисовать круг против часовой стрелки, добавив параметр true в конце акр() - функция:

Перед: context.arc(110, 300, 15, 0, Math.PI);

После того, как: context.arc(110, 300, 15, Math.PI, 0, true);

Как вам может видеть, что я также изменил значения радиантов

http://jsfiddle.net/Niddro/vqbjqndm/4/