• My latest addition to the code in post #13 were line 80, 90 and 110. They are relevant for removing / cleaning up the traverse lines - or 'ladder step' - that go from the outer to the inner arc when redrawing the outlining of a 'fat' gauge with a different value. You can see them in picture of post #12 - the white 'fat' gauge - where the cleanup was not in place yet. When calculating the outline, the clean-Up property ._cUp holds on to the 4 points that define these two 'traverse' lines of the arc outlines (line 110) for the next redraw (line 90):

    • 80 _.cUp=[]; // clean up vertices
    • 90 g.setColor(0,0,0); while (this.cUp.length) g.drawLine.apply(g,this.cUp.pop());
    • 110 this.cUp.push((c)?v.slice(j-1,j+3):v.sli­ce(0,2).concat(v.slice(-2)));

    That they are working show the pictures of post #15.

    Why do I mention this after the recent posts #19 thru #21: Rendering - outlining and proper filling - has still it's issues: initially I used the 4 points to fill a polygon with the (black) background color... which was pretty disappointing, because it did not 'remove' -the ladders completely. I'm not complaining at all. Having a clean, fully symmetric and completely filled polygon is is no easy task. I noticed this earlier when trying to draw round and bevelled shapes on PixlJS. Math-wise it should not make a difference... but with finite size of a line and low resolution all kinds of numeric effects creep in.

    1 Attachment

    • CGaugeLadderLines.png

Avatar for allObjects @allObjects started