search

ondras / rot.js

ROguelike Toolkit in JavaScript. Cool dungeon-related stuff, interactive manual, documentation, tests!
https://ondras.github.io/rot.js/hp/
BSD 3-Clause "New" or "Revised" License
2.33k stars 254 forks source link

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

Open glfmn opened 4 years ago

glfmn commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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