I've got a static HTML (no network connection needed, just open the file in your browser locally) file that one can use to experiment with colors and scaling coefficients, but dog namd it is difficult to get browsers to display the generated image in pixel-perfect form!
I myself happen to have a
window.devicePixelRatio = 30/23 = 1.3043478260869565 by default, which means that in CSS and HTML,
1px as a length unit is actually a bit over 1.3 display pixels. Furthermore, not all browsers even export
window.devicePixelRatio; Safari and derivatives on iOS do not update it when the user changes the zoom factor (which directly affects it). The most annoying is the CSS
transform: matrix(xx, xy, yx, yy, tx, ty) property that I use for displaying the Canvas element containing the generated image, especially when the user zooms in and pans around to see the exact pixel details, because of how it interacts with the canvas dimensions in pixels, and the visible canvas size in CSS "px" units.
Simply put, when Javascript draws a 1024×480 canvas, your browser scales it larger or smaller without telling you, even if you specify its size in HTML/CSS as "
width:1024px; height:480px;".
I'm starting to really hate browser developers. First, all that "UTF-8 cannot be the default charset, because we labeled every other charset as
legacy, and among us decided that only
legacy charsets can be set as default; so, our hands are tied, sorry" nonsense. Now, with no way to accurately specify
device pixels instead of the imaginary "px" units they actually use (that really have no relation to actual display device pixels at all), because of the old idiotic "this page is best viewed in
W×
H resolution" stuff and web developers using "px" units instead of
em/
ex/
% to specify visible layout length units.

I've got one more trick I'll try before giving up (trying to get browsers to display Canvas data in pixel-perfect form, without scaling errors). If you look this stuff up online, you'll find many that say "this is impossible", because it kinda is, kinda isn't. I can display the Canvas
unscaled in pixel perfect form in all browsers (Chrome 18+, Edge 12+, Firefox 18+, Opera 11.1+, Safari 3+, WebView 4.4+), but zooming in and panning is problematic.
(In case you wonder, even though Javascript is interpreted/JITed within the browser, it is
blazingly fast. Recomputing a new scaled frame takes only a tiny fraction of a second, even on a small ARM SBC; on desktop and laptop machines, it is basically instantaneous: no human-detectable delay at all.)
Attached are the four full frames (both fields) I got from the data @avst provided (great work, by the way!

), using #000000 for background, #0000FF for trace A, #00CC00 for trace B, #00CCFF for trace A + trace B overlapping, #808080 for grid/text, #8080FF for trace A + grid/text overlapping, #80FF80 for trace B + grid/text overlapping, #80FFFF for trace A + trace B + grid/text overlapping, #FF0000 for marker, #CC00CC for marker + trace A overlapping, #CC9900 for marker + trace B overlapping, #CC99CC for marker + trace A + trace B overlapping, #FF8080 for marker + grid/text overlapping, #FF80FF for marker + trace A + grid/text overlapping, #E5CC80 for marker + trace B + grid/text overlapping, and #FFFFFF for marker + trace A + trace B + grid/text overlapping. Not all of these exist in the images, but that's the palette I used to retain all overlapping information; it is
not the best choice visually. I do believe having an easy way to experiment with both the colors and the scaling algorithm in a simple static HTML page would be optimal, as it would let others (perhaps with more visual sense/acuity/taste?) to suggest enhancements, without requiring any hardware or development environment, just a browser.