I am making a game in Haxe+OpenFL, exporting to Canvas HTML5 and I wanted to blur the game when it loses focus.
I can use openFL’s events to detect the focus in and focus out but I want to add the css tag
filter:blur(5px); to the canvas style on focus lost and then remove it when the player focuses again.
Is there a simple way to do this?
Thank you for your help!
Maybe something like…
var div = js.Browser.document.getElementById ("openfl-content");
div.style = "filter:blur(5px);";
Close, but style is defined as:
var style(default,null) : CSSStyleDeclaration;
so it throws this compile error.
Cannot access field or identifier style for writing
but is a great hint. Will look into the Browser class to see if I can hack my way into the HTML (Or maybe just untype js my way to victory?)
untyped __js__('document.getElementById("openfl-content").style = "filter:blur(0px);"')
untyped __js__('document.getElementById("openfl-content").style = "filter:blur(5px);"');
Oh, I think the typed way of doing it looks like this:
Browser.document.getElementById ("openfl-content").style.setProperty ("filter", "blur(5px)");
… but there’s obviously a few ways to do it!