New to Bangle.js and Espruino. Need help with graphics

Did play around with a mixed approach: pre calc the points for a polygon composed of arrays of points for outer and inner arc. The resolution is optimized towards the radius... which then obviously breaks the .fillPoly(): limited to 64 points: see pink shape in the screen shot and WARNING in console (did not know that, but explains to me why @bppattan had to 'draw' it in multiple segments). Drawing a poly though works just fine... no limits! The golden / orange arc is small enough to stay in the 64 points limit.

Noticed furthermore: Passing an array of odd numbers of values to .xyzPoly() locks Espruino (emulator?) up or crashes it.

This is the code. To draw a segment for a particular value range, picks the vertices sets from the outer and inner arc and concatenates them to a single array of vertices by which the polygon is drawn (or filled). The shot shows two sets of data... The gauge is (will be) defined by starting point in degrees and arc in degrees; latter can range up to 360 degrees.

The first gage starts at 180 degrees for 180 degrees (clockwise), with the green polygon being g.drawPoly(so.slice(l-150,l).concat(si.s­lice(0,150)),1);. the '150' - segments -is just an example number and is to be calculated proportional of the value to the maximum value relative to the maximum segments.
The second starts at 135 degrees for 270 degrees (clockwise), with the green polygon being g.drawPoly(so.slice(l-420,l).concat(si.s­lice(0,420)),1);

Will most likely return to overlays... (not speed optimal, but less impacted by .fillPoly()'s limitation. Segmentation of an arc is though still needed... With precalculation and limited resolution the drawing may become a bit complex... so dropping precalculation is an option (calculate on the fly is obviously not a performance issue... is it?)

// cbc.js - circular bar dial
// allObjects - forum.espruiono.com
// 2020-11-22

// left/top = x/y = 0/0

// visual: 270 degree clock-wise gauge starting mid left bottom quadrant
// display: ...starting mid 2nd quadrant ending mid 1st quadrant
var maxExt   = 239
  , center   = {x:80,y:80} // center point 
  , rOuter   =  60
  , rInner   =  50
  , begDeg   = 180 // begin of gauge / dial in degrees (0: +x-axis)
  , degrees  = 180 // arc of gauge / dial in degrees clockwise
  , zeroDeg  = 135 
  , minValue = 0
  , maxValue = 1000
  , s  // segSpec
  , l  // length (of arrays of segs)
  , so // segsOuter
  , si // segsInner
  , ss // segs
  ;

function radian(degree) { return 2*Math.PI * (degree % 360) / 360; }
function getSegSpec(begDeg,degrees,maxExt,x,y,rOu­t,rIn) { // [x,y,...
  var begRad = radian(begDeg)
    , rad    = ((degrees==360)?Math.PI*2:radian(degrees­))
    , segRad = Math.PI/4/rOut
    , segs   = Math.round(rad/segRad)
    , len    = (segs+1)*2
    , sOut   = ((maxExt<=355) ? new Uint8Array(len) : new Uint16Array(len))
    , sIn    = ((rIn) ? (maxExt<=355) ? new Uint8Array(len) : new Uint16Array(len) : undefined)
    , seg    = -1
    , o      = -1
    , i      = -1
    ;
  console.log("rad:",rad);
  for (var n=0;n<9;n++) console.log();
  while(++seg<=segs) {
    rad = begRad+seg*segRad;
    sOut[++o] = Math.round(x+rOut*Math.cos(rad));
    sOut[++o] = Math.round(y+rOut*Math.sin(rad));
  }
  if (rIn) { while (--seg>=0) {
    rad = begRad+seg*segRad;
    sIn[++i] = Math.round(x+rIn*Math.cos(rad));
    sIn[++i] = Math.round(y+rIn*Math.sin(rad));
  } }
  return {segs:segs,len:len,sOut:sOut,sIn:sIn};
}
function t() {
  s=getSegSpec(begDeg,degrees,239,center.x­,center.y,rOuter);
  console.log(s.segs,s.sOut,s.sIn);
  s=getSegSpec(begDeg,degrees,239,center.x­,center.y,rOuter,rInner);
  ss=s.segs;l=s.len;so=s.sOut;si=s.sIn;
  console.log("segs:",ss,", len:",l,so,si);
  console.log(so.slice(0,4),"..",so.slice(­l-4,l),"||",si.slice(0,4),"..",si.slice(­l-4,l));
  d();
}
function d() {
  g.clear();
  g.setColor(1,0,0);
  g.drawPoly(so.slice(0,100));
  g.setColor(0,1,0);
  g.drawPoly(si.slice(l-100,l));
  g.drawPoly(si.slice(l-150,150));
  g.drawPoly(so.slice(l-150,l).concat(si.s­lice(0,150)),1);
  g.setColor(0.7,0.5,0);
  g.fillPoly(so.slice(110,140).concat(si.s­lice(l-140,l-110)));
  g.setColor(1,0.5,1);
  var fp = so.slice(160,l-190).concat(si.slice(190,­l-160));
  console.log(fp);
  g.fillPoly(fp,1);
}
setTimeout(t,999);

1 Attachment