HTML Canvas: сложная форма на основе Fill Arc

Чтобы избежать странных результатов, в сложных формах я бы предпочел выполнить рисование в два этапа:

• Рендеринг твердого тела : нарисовать и заполнить форму
[ 119] Визуализация контура : нарисуйте обводку контура фигуры

Примечание : При рисовании дуг вам нужно знать, что ctx.arc() создаст line от последних координат текущего пути до первой позиции дуги. Чтобы этого избежать, вам нужно позвонить moveTo(), чтобы поднять перо для рисования в первую позицию дуги.

var elementDetail =  {"element":[{"type":"ARC","x1":510,"y1":10,"x2":74.585653306513848,"y2":74.585653306514814,"r":1500,"xm":510,"ym":1510,"alpha":4.4178734952765524,"beta":4.71238898038469,"color":2},{"type":"ARC","x1":74.585653306514587,"y1":74.585653306514928,"x2":10,"y2":510,"r":1500,"xm":1510,"ym":510,"alpha":3.1415926535897931,"beta":3.43610813869793,"color":2},{"type":"ARC","x1":10,"y1":510,"x2":74.585653306514587,"y2":945.41434669348541,"r":1500,"xm":1510,"ym":510,"alpha":2.8470771684816563,"beta":3.1415926535897931,"color":2},{"type":"ARC","x1":74.585653306514871,"y1":945.41434669348541,"x2":510,"y2":1010,"r":1500,"xm":510,"ym":-490,"alpha":1.5707963267948966,"beta":1.8653118119030334,"color":2},{"type":"ARC","x1":510,"y1":1010,"x2":945.4143466934853,"y2":945.41434669348541,"r":1500,"xm":510,"ym":-490,"alpha":1.2762808416867597,"beta":1.5707963267948966,"color":2},{"type":"ARC","x1":945.41434669348541,"y1":945.41434669348541,"x2":1010,"y2":510,"r":1500,"xm":-490,"ym":510,"alpha":0,"beta":0.29451548510813697,"color":2},{"type":"ARC","x1":1010,"y1":510,"x2":945.41434669348519,"y2":74.585653306514132,"r":1500,"xm":-490,"ym":510,"alpha":5.9886698220714489,"beta":6.2831853071795862,"color":2},{"type":"ARC","x1":945.41434669348553,"y1":74.585653306514587,"x2":510,"y2":10,"r":1500,"xm":510,"ym":1510,"alpha":4.71238898038469,"beta":5.006904465492827,"color":2},{"type":"POINT","x1":510,"y1":510,"color":7}]}

let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d")

// draw the solid body
ctx.beginPath();
elementDetail.element.map((elem, index) => {     
  ctx.moveTo(0,0);
  ctx.arc(elem.xm, elem.ym, elem.r, elem.alpha, elem.beta);   
})
ctx.fillStyle = "#6fd0ff";
ctx.fill();
ctx.closePath();

// draw the outline
elementDetail.element.map((elem, index) => {  
  ctx.beginPath();
  ctx.arc(elem.xm, elem.ym, elem.r, elem.alpha, elem.beta);   
  ctx.stroke();
})
ctx.closePath();

canvas{ zoom:.25}

<canvas id="myCanvas" width="1200" height="1200"></canvas>

Вы пытались использовать context.fillStyle="your shape colour"? Я думаю, что вы можете использовать путь для создания фигуры, поэтому каждый раз, когда вы начинаете путь, вам нужно назначить цвет для каждой фигуры. Попробуйте нарисовать дугу и многоугольник отдельно.

function drawGraphics(ctx){
  ctx.beginPath();
  ctx.fillStyle="#6fd0ff"
  elementDetail.element.reverse().map((elem, index) => {
      if(elem.type==="ARC"&&index<=8){
        ctx.arc(elem.xm, elem.ym, elem.r, elem.alpha, elem.beta); 
      }
  })
  ctx.stroke()
  ctx.fill();
  ctx.closePath();
}