Document behaviour of Display.clear() and transparent bg color

[glfmn]

Under the current behavior with the canvas-backed display, using a transparent background (for example #00000000) makes all options to overwrite previously drawn pixels fail to function. I assume that this might be because the default behavior with transparency is to blend to the existing pixels to rather than replace them completely.

I wanted to use a transparent background so the color would not conflict with the CSS for the rest of the site. I have been able to work around this by using the CSS variable which sets the background color with:

let display = new Display({
      fg: getComputedStyle(tile.current).getPropertyValue('--fg'),
      bg: getComputedStyle(tile.current).getPropertyValue('--bg'),
})

It would be nice to document that the clear function will not draw over pixels if the background color is transparent, or otherwise change this behavior.

[ondras]

Hi @glfmn,

thanks for the report. I will try to either add this to the documentation or come up with a fix so that clearing with transparency actually does stuff :)

[ondras]

Hi @glfmn,

can you please provide an example that demonstrates the difficulties you are running into? I just tried https://jsfiddle.net/f5b4veca/ and it seems to work both in Firefox and Chrome. I might be missing some crucial point, though.

[ondras]

Never mind, please ignore my previous example. I obviously forgot that individual calls are batched per requestAnimationFrame.