both, me and codeclimate are happy about this now, feel free to review 😄

After a long chat with @simonbrunel and many tests with jsperf, applied some optiomizations to parsing. Also added a regression test for chart area clipping.

Added regression test was inspired by the thought of it not working after this PR. That turns out to be false.

MDN gives a misleading description to clip:

The CanvasRenderingContext2D.clip() method of the Canvas 2D API turns the current or given path into the current clipping region. It replaces any previous clipping region.

HTML Standard:

The clip() method, when invoked, must create a new clipping region by calculating the intersection of the current clipping region and the area described by the intended path, using the fill rule indicated by the fillRule argument. Open subpaths must be implicitly closed when computing the clipping region, without affecting the actual subpaths. The new clipping region replaces the current clipping region.

After loads of more talk and testing with @simonbrunel, decided to go with option C

A
This is how master handles semi-transparent borders.

B
Previous version of this PR.

C
Whole bar is filled with background color and borders are drawn on top of that.
This removes remaining glitches between border and background. It also simplifies the drawing even more!
Note: These glitches appear only when devicePixelRatio != 1
Note2: I had to use still clip to remove faint outer borders on Chrome when on the edges there should be no border (the original fill problem @nagix)

Visualizing the difference:

Thanks @kurkle for this great work!